CORS跨域+Nginx配置、Apache配置

CORS（Cross-Origin Resource Sharing，跨源资源共享）是一种机制，它使用额外的HTTP头部来告诉浏览器允许一个网页运行的脚本从不同于它自身来源的服务器上请求资源（例如字体、JavaScript、CSS等）。这是一种安全特性，用于帮助减少跨站请求伪造（CSRF）攻击的风险。

CORS 跨域请求的工作流程

1. 浏览器发起跨域请求：当一个网页尝试从不同的源（协议、域名、端口中任意一者不同）加载资源时，浏览器会自动添加一些HTTP头部信息（如Origin），并将请求发送到服务器。

2. 服务器响应CORS头部：服务器在响应中通过添加CORS相关的HTTP头部来指示浏览器是否允许该跨域请求。这些头部包括：

   • Access-Control-Allow-Origin：指定哪些网站可以参与跨域资源共享。
   • Access-Control-Allow-Methods：明确告知客户端，实际请求所允许使用的HTTP方法。
   • Access-Control-Allow-Headers：在预检请求中，告知客户端在实际请求中，哪些HTTP头信息会被支持。
   • Access-Control-Allow-Credentials：表明是否允许发送Cookie。
   • Access-Control-Max-Age：指定预检请求的结果能够被缓存多久。

3. 浏览器判断响应：浏览器检查响应中的CORS头部，决定是否接受响应。如果服务器返回的CORS头部不允许当前源进行跨域请求，浏览器会拒绝响应，并可能抛出错误。

常见的CORS错误

• Access-Control-Allow-Origin 不匹配：请求的Origin头部与服务器响应的Access-Control-Allow-Origin不匹配。
• 缺少CORS头部：服务器没有返回任何CORS相关的HTTP头部。
• 预检请求失败：对于复杂请求（如使用PUT、DELETE或PATCH方法，或发送自定义头部），浏览器会首先发送一个OPTIONS请求作为“预检”。如果服务器没有正确响应预检请求，则实际请求不会被发送。

Apache

   # 允许所有源进行跨域请求  
    Header set Access-Control-Allow-Origin "*"  
  
    # 允许跨域请求的方法  
    Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"  
  
    # 允许跨域请求时携带的自定义头部  
    Header set Access-Control-Allow-Headers "DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization"  
  

Nginx

location / {  add_header 'Access-Control-Allow-Origin' '*';  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';  
}