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

目录

前后端分离

跨域

跨域的解决办法

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

2.jsonp

3.proxy(代理)

---

前后端分离

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

http://t.csdn.cn/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跨域请求。

下载：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
  };

2.jsonp

3.proxy(代理)