CORS跨域+Nginx配置、Apache配置

简介: CORS跨域+Nginx配置、Apache配置

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

CORS 跨域请求的工作流程

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

服务器响应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:指定预检请求的结果能够被缓存多久。

浏览器判断响应:浏览器检查响应中的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';  
}
目录
相关文章
|
安全 前端开发 应用服务中间件
Nginx 轻松搞定跨域问题
Nginx 轻松搞定跨域问题
|
Web App开发 安全 应用服务中间件
|
11月前
|
应用服务中间件 nginx
nginx解决本地跨域问题
nginx解决本地跨域问题
|
应用服务中间件 程序员 nginx
nginx配置的服务不生效underscores_in_headers
nginx配置的服务不生效underscores_in_headers
409 0
|
前端开发 应用服务中间件 nginx
Nginx 设置跨域访问
什么是跨域访问,当我们通过浏览器访问a网站时,同事会利用到ajax或其他方式,同时也请求b网站,这样的话就出现了请求一个页面,使用了两个域名,这种方式对浏览器来说默认是禁止的。
Nginx 设置跨域访问
|
应用服务中间件 nginx
(CORS) Nginx配置跨域
网站配置文件server 添加以下即可
165 0
|
应用服务中间件 API nginx
简单配置nginx反向代理,实现跨域请求
简单配置nginx去做反向代理,实现跨域请求 简单介绍nginx的nginx.conf最核心的配置,去做反向代理,实现跨域请求。 更多详细配置,参考nginx官方文档 先介绍几个nginx命令 打开nginx.
6933 0
|
安全 前端开发 应用服务中间件
解决 用 Nginx 处理 跨域问题
解决 用 Nginx 处理 跨域问题
1154 0
解决 用 Nginx 处理 跨域问题
|
应用服务中间件 nginx
NGINX的CORS--跨域访问配置
阻止交叉源访问问题。 网上可搜N多,解决办法都差不多,其中一种: add_header Access-Control-Allow-Origin http://xxxx:port; add_header Access-Control-Allow-Credentia...
1376 0
|
JSON 缓存 前端开发
如何通过 Nginx 解决跨域问题
如何通过 Nginx 解决跨域问题
476 0