一文看懂Nginx如何配置跨域，值得收藏

当呈现403跨域错误的时辰 No 'Access-Control-Allow-Origin' header is present on the requested resource，必要给Nginx处事器设置相应的header参数，下面一路来看看吧!

一、 设置跨域

只必要在Nginx的设置文件中设置以下参数：

location / {  
 add_header Access-Control-Allow-Origin *; 
 add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; 
 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'; 
  
 if ($request_method = 'OPTIONS') { 
 return 204; 
 } 
} 

上面设置代码即可办理题目了。

二、 参数声名

1. Access-Control-Allow-Origin

处事器默认是不被应承跨域的。给Nginx处事器设置`Access-Control-Allow-Origin *`后，暗示处事器可以接管全部的哀求源(Origin),即接管全部跨域的哀求。

2. Access-Control-Allow-Headers 是为了防备呈现以下错误：

Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response. 

这个错误暗示当前哀求Content-Type的值不被支持。着实是我们提倡了"application/json"的范例哀求导致的。这里涉及到一个观念：预检哀求(preflight request),请看下面"预检哀求"的先容。

3. Access-Control-Allow-Methods 是为了防备呈现以下错误：

Content-Type is not allowed by Access-Control-Allow-Headers in preflight response. 

4. 给OPTIONS 添加 204的返回，是为了处理赏罚在发送POST哀求时Nginx依然拒绝会见的错误

发送"预检哀求"时，必要用到要领 OPTIONS ,以是处事器必要应承该要领。

三、 预检哀求(preflight request)

着实上面的设置涉及到了一个W3C尺度：CROS,全称是跨域资源共享 (Cross-origin resource sharing)，它的提出就是为了办理跨域哀求的。

跨域资源共享(CORS)尺度新增了一组 HTTP 首部字段，应承处事器声明哪些源站有权限会见哪些资源。其它，类型要求，对那些也许对处事器数据发生副浸染的HTTP 哀求要领(出格是 GET 以外的 HTTP 哀求，可能搭配某些 MIME 范例的 POST 哀求)，赏识器必需起首行使 OPTIONS 要领提倡一个预检哀求(preflight request)，从而获知处事端是否应承该跨域哀求。处事器确认应承之后，才提倡现实的 HTTP 哀求。在预检哀求的返回中，处事器端也可以关照客户端，是否必要携带身份凭据(包罗 Cookies 和 HTTP 认证相干数据)。

着实Content-Type字段的范例为application/json的哀求就是上面所说的搭配某些 MIME 范例的 POST 哀求,CORS划定，Content-Type不属于以下MIME范例的，都属于预检哀求：

application/x-www-form-urlencodedmultipart/form-datatext/plain 

以是 application/json的哀求 会在正式通讯之前，增进一次"预检"哀求，这次"预检"哀求会带上头部信息 Access-Control-Request-Headers: Content-Type：

OPTIONS /api/test HTTP/1.1 
Origin: http://foo.example 
Access-Control-Request-Method: POST 
Access-Control-Request-Headers: Content-Type 
...  

处事器回应时，返回的头部信息假如不包括Access-Control-Allow-Headers: Content-Type则暗示不接管非默认的的Content-Type。即呈现以下错误：

Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response. 

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!