700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 前后端分离 + 跨域 + 跨域的解决办法

前后端分离 + 跨域 + 跨域的解决办法

时间:2020-03-03 13:25:48

相关推荐

前后端分离 + 跨域 + 跨域的解决办法

目录

前后端分离

跨域

跨域的解决办法

1.cors:需要用到egg-cors这个第三方模块

2.jsonp

3.proxy(代理)

前后端分离

看前端代码放在别人服务器上面怎么操作去到:

/4nPZR

前端代码要放在一个服务器里面,后端代码也要放在服务器里面,这样才可以被访问到。

前端代码放在web服务器里面(提供网页访问的服务器)。

egg框架创建的服务器,虽然可放前端代码,也可放后端代码,但是如果想前后端分离,那就把后端代码放egg服务器里面,然后前端代码放另外的服务器里面(可以自己写一个服务器,也可以放到别人写好的服务器里面:Apache或者Nginx)。我这里前端代码就放在别人写的服务器上面Apache或者Nginx。

这时需要打开一个新的vscode界面去放我们的前端项目。原来的vscode放我们的后端项目。

这种前后端分离的话,很容易会产生跨域的问题。

跨域

ajax请求限制在同源的(同源:域名,协议,端口相同就是同源)

跨域:协议,域名,端口任意一个不同就会产生跨域。

前端:Apache服务器 访问:http://127.0.0.1:80

后端:egg服务器 访问:http://127.0.0.1:8000

分析:它们的端口不同,所以跨域。

跨域的解决办法

1.cors:需要用到egg-cors这个第三方模块

框架提供了egg-cors插件来实现cors跨域请求。

下载:npmi --save egg-cors

然后再:

//开启插件:在 config/plugin.js//跨域处理cors: {enable: true,package: 'egg-cors',}

还要再:(后端服务器代码改变后要重启服务器)

前后端不分离用这个:

//配置cors:在 config/config.default.js//跨域的配置config.cors = {origin: '*', //允许的域,*代表所有的allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH' //允许跨域的请求方法};

分析: * 表示不管前端代码放在哪个服务器上面都可以来访问egg后端服务器。也可以设置允许某个特定的域来访访问。

前后端分离用下面这个:

//配置cors:在 config/config.default.js//跨域的配置config.cors = {// origin: '*', //允许的域,*代表所有的origin: 'http://127.0.0.1', //如果想携带cookie,这里必须指定前端服务器ip和端口号allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH', //允许跨域的请求方法credentials:true //后端允许跨域携带cookie};

2.jsonp

3.proxy(代理)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。