标签 跨域 下的文章

Nginx 配置反向代理 add_header 不生效的原因及解决办法

• 作者: Chuwen
• 时间: 2021-04-30
• 分类: Nginx
• 评论

## 背景 因同事用 Hyperf 搭建的接口，然后用 Vue.js 写的前端去调用，出现跨域问题 ## 无效原因 > Nginx `add_header` 只对 `200,201,204,206,301,302,303,304,307` 这些状态码生效，对于 401 405 403 这些状态码是不生效的。 恰好我测试的时候就随便访问了个链接，返回的状态码是 **404** 的，结果一直刷新都不出来添加的 `header` ## 解决办法 在末尾加一个 `always` 即可，即： ```conf add_header Access-Control-Allow-Origin * always; ``` 此外还引出一个问题，就是如果你将 **Access-Control-Allow-Origin** 头的值设置为 `*`，那么前端进行请求时，不出意外的话浏览器控制台就会提示这个错误：  > Access to XMLHttpRequest at 'http://api.xxxxxxx.com/v1/userinfo from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute. > > **机翻成中文：** > > 通过CORS策略已阻止从来源 “http://localhost:8080” 访问 “http://api.xxxxxxx.com/v1/userinfo” 处的XMLHttpRequest：对预检请求的响应未通过访问 控制检查：当请求的凭据模式为“包括”时，响应中“访问控制允许-来源”标头的值不得为通配符“ *”。 XMLHttpRequest 发起的请求的凭据模式由 withCredentials 属性控制。 > > 相关链接：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials ### 原因是：当前端(如 axios)配置 `withCredentials=true` 时, 后端配置 `Access-Control-Allow-Origin` 不能为 `*`, 必须是相应地址 ### axios 设置 withCredentials 为 false ```js // axios配置 axios.defaults.withCredentials = false; // 携带cookie ``` --- 更多相关跨于问题，这篇文章可以作参考：https://juejin.cn/post/6844903748288905224 以下是从上述链接渣摘抄 ### 问题 1 > 解决方案：当前端配置withCredentials=true时, 后端配置Access-Control-Allow-Origin不能为*, 必须是相应地址 ``` Access to XMLHttpRequest at 'http://127.0.0.1:8081/getInfo?t=1545900042823' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute. ``` ### 问题 2 > 解决方案：当配置withCredentials=true时, 后端需配置Access-Control-Allow-Credentials ``` Access to XMLHttpRequest at 'http://127.0.0.1:8081/getInfo?t=1545899934853' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute. ``` ### 问题 3 > 解决方案：当前端配置请求头时, 后端需要配置Access-Control-Allow-Headers为对应的请求头集合 ``` Access to XMLHttpRequest at 'http://127.0.0.1:8081/getInfo?t=1545898876243' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field x-requested-with is not allowed by Access-Control-Allow-Headers in preflight response. ```

Nginx如何配置跨域(多个域名)

• 作者: Chuwen
• 时间: 2020-03-17
• 分类: Nginx
• 评论

### 设需要允许来源为 `localhost` 或 `*.example.com` 下所有二级域名的访问，在 nginx 中只需要类似这样配置即可： ``` location / { set $match ""; # 支持http及https if ($http_origin ~* 'https?://(localhost|.*\.example\.com)') { set $match "true"; } if ($match = "true") { add_header Access-Control-Allow-Origin "$http_origin"; add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; add_header Access-Control-Allow-Methods GET,POST,OPTIONS,DELETE; add_header Access-Control-Allow-Credentials true; } # 处理OPTIONS请求 if ($request_method = 'OPTIONS') { return 204; } } ———————————————— ``` --- 原文链接：https://blog.csdn.net/moxiaomomo/article/details/82970004

PHP设置允许AJAX跨域请求

• 作者: Chuwen
• 时间: 2018-01-04
• 分类: PHP
• 评论

# 1. 跨域请求 > 跨源资源共享（CORS）是一种机制，它使用额外的HTTP标头，让用户代理获得访问来自不同来源（域）的服务器上选定资源的权限，而不是使用当前正在使用的站点。用户代理在请求来自与当前文档不同的域，协议或端口的资源时发出 **跨源HTTP请求**。 ### `以下内容` 引用自 什么是JS跨域访问？ - 黄家兴的回答 - 知乎 <a href="https://www.zhihu.com/question/26376773/answer/244453931?href=https://NowTime.cc" target="_blank" >https://www.zhihu.com/question/26376773/answer/244453931 </a>，有删改 > ## 1-2. 浏览器的同源策略会导致跨域，这里同源策略又分为以下两种 > 1. `DOM` 同源策略：禁止对不同源页面 `DOM` 进行操作。这里主要场景是 `iframe` 跨域的情况，不同域名的 `iframe` 是限制互相访问的。 > 2. `XmlHttpRequest` 同源策略：禁止使用 `XHR` 对象向不同源的服务器地址发起 `HTTP` 请求。 > > ## 1-3. 为什么要有跨域限制 > ### 1-3-1. AJAX同源策略主要用来防止CSRF攻击。如果没有AJAX同源策略，相当危险，我们发起的每一次HTTP请求都会带上请求地址对应的cookie，那么可以做如下攻击： > 1. 用户登录了自己的银行页面 http://mybank.com，http://mybank.com 向用户的cookie中添加用户标识。 > 2. 用户浏览了恶意页面 http://evil.com。执行了页面中的恶意AJAX请求代码。 > 3. http://evil.com 向 http://mybank.com 发起AJAX HTTP请求，请求会默认把 http://mybank.com 对应cookie也同时发送过去。 > 4. 银行页面从发送的 cookie 中提取用户标识，验证用户无误，response 中返回请求数据。此时数据就泄露了。 > 5. 而且由于Ajax在后台执行，用户无法感知这一过程。 > > ### 1-3-2. DOM同源策略也一样，如果iframe之间可以跨域访问，可以这样攻击： > 1. 做一个假网站，里面用iframe嵌套一个银行网站 http://mybank.com。 > 2. 把iframe宽高啥的调整到页面全部，这样用户进来除了域名，别的部分和银行的网站没有任何差别。 > 3. 这时如果用户输入账号密码，我们的主网站可以跨域访问到http://mybank.com的dom节点，就可以拿到用户的输入了，那么就完成了一次攻击。 > > #### 所以说有了跨域跨域限制之后，我们才能更安全的上网了。 # 2. 允许跨域 ## 2-1. 在服务端设置 `header` 头允许跨域 ```php <?php //1. 允许 https://nowtime.cc 发起的跨域请求 header("Access-Control-Allow-Origin: https://nowtime.cc"); //2. 如果需要设置允许所有域名发起的跨域请求，可以使用通配符 `*` //这样做虽然很方便，但在一些场景会出现一些安全问题，建议使用上面那种方法，并加上一些业务逻辑，例如判断 Request Headers 中的 Origin header("Access-Control-Allow-Origin: *"); ```