Nginx-跨域请求配置
⼀、什么是跨域？
跨域是指从⼀个域名的⽹页去请求另⼀个域名的资源。⽐如从 页⾯去请求 的资源。跨域的严格⼀点的定义是：只要 协议，域名，端⼝有任何⼀个的不同，就被当作是跨域。
⼆、为什么要限制跨域？
原因就是安全问题：如果⼀个⽹页可以随意地访问另外⼀个⽹站的资源，那么就有可能在客户完全不知情的情况下出现安全问题。⽐如下⾯的操作就有安全问题：
1、⽤户访问 ，登陆并进⾏⽹银操作，这时cookie啥的都⽣成并存放在浏览器
2、⽤户突然想起件事，并迷迷糊糊地访问了⼀个邪恶的⽹站
3、这时该⽹站就可以在它的页⾯中，拿到银⾏的cookie，⽐如⽤户名，登陆token等，然后发起对 的操作。
4、如果这时浏览器不予限制，并且银⾏也没有做响应的安全处理的话，那么⽤户的信息有可能就这么泄露了。
餐具设计
三、为什么要跨域？
既然有安全问题，那为什么⼜要跨域呢？ 有时公司内部有多个不同的⼦域，⽐如⼀个是 ,⽽应⽤是放在 , 这时想从 去访问 的资源就属于跨域。
五实现跨域需要的技术⼿段？
1、JSONP
2、CORS：原名是跨域资源共享(Cros-origin resource sharing)
六、Nginx中跨域请求简单配置及参数详解
# Access-Control-Allow-Origin
服务器默认是不被允许跨域的。给Nginx服务器配置`Access-Control-Allow-Origin *`后，
表⽰服务器可以接受所有的请求源（Origin），即接受所有跨域的请求。也可以指定⼀个确定的URL。
# Access-Control-Allow-Methods
Access-Control-Allow-Methods 是为了防⽌出现以下错误：
系统封装Content-Type is not allowed by Access-Control-Allow-Headers in preflight respon.
# Access-Control-Allow-Credentials 'true’;
可选字段, 为true表⽰允许发送Cookie. 同时, 发送时, 必须设置XMLHttpRequest.withCredentials为true才有效. 请求若服务器不允许浏览器发送, 删除该字段即可。
# Access-Control-Allow-Headers
Access-Control-Allow-Headers 是为了防⽌出现以下错误：
Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight respon.
这个错误表⽰当前请求Content-Type的值不被⽀持。
其实这是我们发起了"application/json"的类型请求导致的。
这⾥涉及到⼀个概念：预检请求（preflight request）。
# 给OPTIONS 添加 204的返回
这是为了处理在发送POST请求时Nginx依然拒绝访问的错误
发送"预检请求"时，需要⽤到⽅法 OPTIONS ，所以服务器需要允许该⽅法。
==================================================================================
{
rver 192.168.1.22:8087 max_fails=100 fail_timeout=1s;
keepalive 50000;
}
rver {
listen 80;
rver_name ;
access_log logs/apptest.access.log main;
error_log log;
location / {
add_header Access-Control-Allow-Origin '127.0.0.1:8080' always;
add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
add_header Access-Control-Allow-Credentials 'true';
add_header Access-Control-Allow-Headers 'Accept,cercode,Authorization,Keep-Alive,Ur-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
if ($request_method = 'OPTIONS') {
however的用法
add_header 'Access-Control-Allow-Origin' '127.0.0.1:8080' always;
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, DELETE, PUT, OPTIONS';
跳槽简历模板add_header 'Access-Control-Allow-Headers' 'cercode,Accept, Authorization,Keep-Alive,Ur-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
add_header 'Content-Type' 'text/plain chart=UTF-8';
add_header 'Content-Length' 0;
return 204;
}
include f;
}
}
==================================================================================
七、预检请求
# 简单的跨域请求可以省略预检请求的配置，⾮简单的跨域请求需要配置预检请求。
# 预检请求使⽤的过程⼤致如下：
1、浏览器发送请求询问当前域名是否⽀持跨域, 能使⽤哪些HTTP动词及头字段信息等.
预检请求的头信息:
OPTIONS /cors HTTP/1.1
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host:
Accept-Language: en-US
Connection: keep-alive
Ur-Agent: Mozilla/5.0…
OPTIONS表⽰这个请求是询问的, origin表⽰预检请求来⾃哪个源
profit
Access-Control-Request-Method: 该字段必须, 列出浏览器的CORS请求会⽤到哪些HTTP⽅法
Access-Control-Request-Headers: 该字段是⼀个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段，上例是X-Custom-Header。这个字段通常在XMLHttpRequest.tRequestHeader()⽅法中已经设置好了。
2、预检请求的回应
服务器收到预检请求后, 会检查预检请求的字段是否符合服务器的垮源规定.
若允许垮源, 则做出回应, 服务器会发送⼀个包含Access-Control-Allow-Origin字段的响应报⽂给浏览器,
例如:
HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
有线电视安装
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; chart=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
房产证明Content-Type: text/plain
Access-Control-Allow-Methods：该字段必需，它的值是逗号分隔的⼀个字符串，表明服务器⽀持的所有跨域请求的⽅法。注意，返回的是所有⽀持的⽅法，⽽不单是浏览器请求的那个⽅法。这是为了避免多次“预检”请求。
实验室的英文Access-Control-Allow-Headers: 如果浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers 字段是必需的。它也是⼀个逗号分隔的字符串，表明服务器⽀持的所有头信息字段，不限于浏览器在“预检”中请求的字段。
Access-Control-Max-Age: 该字段可选，⽤来指定本次预检请求的有效期，单位为秒。上⾯结果中，有效期是20天（1728000秒），即允许缓存该条回应1728000秒（即20天），在此期间，不⽤发出另⼀条预检请求。
=================================================
声明：本⽂参考了多个⼤佬的博客，参考链接如下，如需转载请附上以下原⽂连接=================================================
