nginx支持跨域(nginx跨域配置详解)

nginx跨域配置详解

1.跨域问题的由来

何谓同源:URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示它们同源。浏览器的同源策略，从一个域上加载的脚本不允许访问另外一个域的文档属性 ，是浏览器上为安全性考虑实施的非常重要的安全策略。举个例子：比如一个恶意网站的页面通过iframe嵌入了银行的登录页面（二者不同源），如果没有同源限制，恶意网页上的javascript脚本就可以在用户登录银行的时候获取用户名和密码。

2.跨域的影响范围

在浏览器中，<script>、<img>、<iframe>、<link>等标签都可以加载跨域资源，而不受同源限制，

但浏览器会限制脚本中发起的跨域请求。比如，使用 XMLHttpRequest 对象和Fetch发起 HTTP 请求就必须遵守同源策略。

Web 应用程序通过 XMLHttpRequest 对象或Fetch能且只能向同域名的资源发起 HTTP 请求，而不能向任何其它域名发起请求。

不允许跨域访问并非是浏览器限制了发起跨站请求，而是跨站请求可以正常发起，但是返回结果被浏览器拦截了。

最好的例子是CSRF跨站攻击原理，请求是发送到了后端服务器,无论是否设置允许跨域,

有些浏览器不允许从HTTPS跨域访问HTTP，比如Chrome和Firefox，这些浏览器在请求还未发出的时候就会拦截请求,这是特例。

此外父页面js操作不同域的iframe属性时，也会受到跨域限制

nginx配置解决跨域问题

在Nginx中修改跨域配置非常简单，只需要在虚拟主机配置文件中添加以下内容：

add_header Access-Control-Allow-Origin *; 

add_header Access-Control-Allow-Methods GET, POST, OPTIONS;

add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type; 

add_header Access-Control-Max-Age 1728000; 

其中，Access-Control-Allow-Origin用于指定允许跨域请求的域名，Access-Control-Allow-Methods用于指定允许跨域请求的HTTP方法，Access-Control-Allow-Headers用于指定允许跨域请求的HTTP头，Access-Control-Max-Age用于指定允许跨域请求的缓存时间。

nginx 跨域

不一定，但目前nginx是首选，因为对外来说同域名应用。nginx作用是实现转发，避免跨域。实际如果内网使用无特别要求也可以业务直接互通

nginx跨域cors

详细信息

登录CDN控制台。

在域名管理页面，选择需要配置CORS功能的域名对应的 管理。

单击 缓存配置，选择 HTTP头 > 添加。

进入HTTP头设置页面，选择 Access-Control-Allow-Origin 参数，取值请根据现场环境而定，单击 确认。

注：Access-Control-Allow-Origin参数的取值不支持多个域名。

然后在选择 Access-Control-Allow-Methods 参数，取值请根据现场环境而定，单击 确认。

更多信息

以下为配置跨域资源共享（CORS）的注意事项。

目前不支持泛域名添加，如*.12345.com，仅支持域名精确匹配。

目前仅支持配置一条白名单域名。

若使用OSS产品作为源站，OSS与CDN控制台同时配置CORS，CDN的配置将覆盖OSS。

若源站为自己的服务器或ECS产品，建议先进行动静分离，静态文件使用CDN加速，CDN控制台配置的CORS功能，仅对静态文件生效。

适用于

CDN

nginx 跨域设置

要在nginx上启用跨域请求，需要添加add_header Access-Control*指令。

nginx解决跨域的常用方案

这是因为他的挑链接跨度太大，有时会跨越到另一个赋值领域，从而出现该问题

nginx跨域解决

nginx中设置允许跨域的响应头方法：添加如下location：location / {add_header Access-Control-Allow-Origin *;}会在响应头中添加Access-Control-Allow-Origin字段以允许跨域