前后端分离跨域问题

Question

我前端是用react ＋ redux
后端用node，用superagent来拉取后端数据
拉取本地数据的时候出现跨域问题
XMLHttpRequest cannot load http://localhost:3000/init/redis. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3020' is therefore not allowed access.

Answer 1

在路由前面加上

//设置服务器跨域权限
app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
  next();
});

Answer 2

https://developer.mozilla.org/zh-CN/docs...

跨源资源共享标准通过新增一系列 HTTP 头，让服务器能声明哪些来源可以通过浏览器访问该服务器上的资源。另外，对那些会对服务器数据造成破坏性影响的 HTTP 请求方法（特别是 GET 以外的 HTTP 方法，或者搭配某些MIME类型的POST请求），标准强烈要求浏览器必须先以 OPTIONS 请求方式发送一个预请求(preflight request)，从而获知服务器端对跨源请求所支持 HTTP 方法。在确认服务器允许该跨源请求的情况下，以实际的 HTTP 请求方法发送那个真正的请求。服务器端也可以通知客户端，是不是需要随同请求一起发送信用信息（包括 Cookies 和 HTTP 认证相关数据）。

在浏览器访客模式下（干净模式），web inseptor WEB调试工具抓一下，是否有OPTIONS协议，如果有——
尝试实现一个OPTIONS协议响应（或者中间件）来处理Access-Control-Allow-Origin，告知浏览器允许跨域

Answer 3

用nginx反向代理后端