解决前后端分离后跨域问题

近期正在参与的项目采用了前后端分离方式部署，恰巧遇到跨域问题。下面我对这个问题出现的原因及解决办法进行总结一下，希望大家拍砖。

问题原因

跨域出现的原因是因为前后端部署在非同域后，浏览器进行了安全限制。

例如：

前端应用：http://frontend.local/index.html

后端应用：http://backend.local/api/v1/query

当前端应用需要调用后端应用时，这个时候就会出现类似如下错误。

 

 

No-Access-Control-Allow-Origin的意思是，请求头内没有找到找到这个标识。也就是说，后端应用不允许这个域名请求。

解决办法

解决跨域有两种办法

1.Nginx上增加请求头Access-Control-Allow-Origin，推荐使用

    add_header Access-Control-Allow-Credentials true;       
    add_header Access-Control-Allow-Origin your_domain;
    add_header Access-Control-Allow-Methods GET,POST;
    add_header Access-Control-Allow-Headers DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,Cookie;   

2.cors设置，要在后端应用在响应头中加Access-Control-Allow-Origin，推荐使用

# 服务端允许访问的域名
Access-Control-Allow-Origin=your_domain
# 服务端允许访问Http Method
Access-Control-Allow-Methods=GET, POST, PUT, DELETE, PATCH, OPTIONS
# 服务端接受跨域带过来的Cookie,当为true时,origin必须是明确的域名不能使用*
Access-Control-Allow-Credentials=true
# Access-Control-Allow-Headers 表明它允许跨域请求包含content-type头，我们这里不设置，有需要的可以设置
#Access-Control-Allow-Headers=Content-Type,Accept
# 跨域请求中预检请求(Http Method为Option)的有效期,20天,单位秒
Access-Control-Max-Age=1728000

3.jsonp，安全性差，不推荐

这里只讨论Nginx与CORS设置头信息方式。设置后，我们会发现除了原请求基础上，还增加了一个叫Option的请求。那这个请求是干什么的呢。

原因：因为本次Ajax请求是“非简单请求”,所以请求前会发送一次预检请求(OPTIONS)，这个操作由浏览器自己进行。如果服务器端后台接口没有允许OPTIONS请求,将会导致无法找到对应接口地址，由此可知这个Options请求是一个试探性请求，再接收到服务端允许后，才继续发送真实的请求。

ps. 如果跨域需要携带cookie去请求，Access-Control-Allow-Credentials必须为true，但是需要注意当Access-Control-Allow-Credentials=true时，Access-Control-Allow-Origin就不能为” * “ ，必须是明确的域名

参考：跨源资源共享（CORS）