目录
前后端分离
看前端代码放在别人服务器上面怎么操作去到:
扫描二维码关注公众号,回复: 17060280 查看本文章
前端代码要放在一个服务器里面,后端代码也要放在服务器里面,这样才可以被访问到。
前端代码放在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跨域请求。
下载:npm i --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
};