草庐IT

CORS跨域

liuyuede123 2023-03-28 原文

01、索引

https://waterflow.link/articles/1665656761584

1、为什么跨域

跨域资源共享 (CORS) 是一种基于 HTTP 标头的机制，它允许服务器指示除其自身之外的任何来源（域、方案或端口），浏览器应允许从中加载资源。 CORS 还依赖于一种机制，浏览器通过该机制向托管跨域资源的服务器发出“预检”请求，以检查服务器是否允许实际请求。 在该预检中，浏览器发送指示 HTTP 方法的标头和将在实际请求中使用的标头。

跨域请求的示例：从 https://a.com 提供的前端 JavaScript 代码使用 ajax 向 https://b.com/data.json 发出请求。

出于安全原因，浏览器限制从脚本发起的跨域 HTTP 请求。 例如，ajax 和 请求的 API 遵循同源策略。 这意味着使用这些 API 的 Web 应用程序只能从加载应用程序的同一来源请求资源，除非来自其他来源的响应包含正确的 CORS 标头。

2、跨域的规则

CORS标准通过添加新的 HTTP 头来工作，服务器可以返回允许哪些来源从 Web 浏览器读取该信息。此外，对于可能对服务器数据造成副作用的 HTTP 方法（特别是 GET 以外的 HTTP方法 ，或具有某些 MIME 类型的 POST），规范要求浏览器“预检”请求（先发送OPTIONS请求），然后在服务器“允许”后发送实际请求。

CORS 失败会导致错误，但出于安全原因，JavaScript 无法获得有关错误的详细信息。所有代码都知道发生了错误。确定具体出了什么问题的唯一方法是查看浏览器的控制台以获取详细信息。

3、跨域场景

1、不会触发预检

简单的请求不会触发预检，那什么是简单的请求呢？

  • 首先请求方法必须是GET、HEAD、POST其中之一
  • 除了客户端自动设置的header头（比如：Connection、User-Agent等），只能设置如下的这些header头
    • Accept
    • Accept-Language
    • Content-Language
    • Content-Type：只允许application/x-www-form-urlencoded、multipart/form-data、text/plain类型
    • Range：只能是一些简单的header头，比如bytes=256-或者bytes=127-255

下面是一个简单请求的流程：

  1. 首先客户端会向a.com会向服务端b.com发送请求，并带上源域名。
  2. 作为响应，服务器返回一个带有 Access-Control-Allow-Origin: * 的 Access-Control-Allow-Origin 标头，这意味着该资源可以被任何来源访问。（一般允许某个域或者某几个域，可以用正则）

2、会触发预检

和简单请求不同，处于安全考虑，会先向“预检”请求，浏览器首先使用 OPTIONS 方法向另一个源上的资源发送 HTTP 请求，以确定实际请求是否可以安全发送。

下面是预检请求的流程：

  1. 首先客户端header头已经不符合简单请求的header，这时会触发预检。
  2. 客户端发送OPTIONS请求，以获取允许跨域的header头，会返回204 No Content的状态码
  3. 预检成功之后，客户端会发送正常的POST请求

3、nginx跨域配置

注意：如果nginx设置跨域重复，客户端console也会提示重复跨域

add_header Access-Control-Allow-Origin * always; # 允许所有
add_header Access-Control-Allow-Methods 'PUT,POST,GET,DELETE,OPTIONS'; #允许指定的请求方法
add_header Access-Control-Allow-Headers 'token,eceibstoken,powercode,DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'; # 允许指定的header头
add_header Access-Control-Expose-Headers *; # 指定客户端可以访问哪些header
# 如果是预检请求，返回204
if ($request_method = OPTIONS) {
    return 204;
}
CORS跨域预检标头headerGo

有关CORS跨域的更多相关文章

  1. ruby-on-rails - 如何修复 `new' :String 的未定义方法 "Rack::Cors" - 2

    我是RubyonRails的新手，正在学习如何使用Angular，但是在我运行“geminstallrack-cors”之后，当我尝试启动Rails应用程序时，我保持收到此错误:C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/actionpack-5.1.1/lib/action_dispatch/middleware/stack.rb:35:in`build':undefinedmethod`new'for"Rack::Cors":String(NoMethodError)Didyoumean?nextfromC:/Ruby23-x64/lib/ruby

  2. 【uniapp】uni.request请求跨域问题解决方案 - 2

    例如，运行H5页面，请求一个地址资源，如果不是本站地址，浏览器就会报跨域错误，这样访问受限问题呈现例如，项目代码里是这样写的，运行H5测试uni.request({ url:'https://gitcode.net/zs1028/stat...ouces_2023/-/...', success(res){ console.log(res) }, fail(err){ console.error(err) }})因为https://gitcode.net不是本站地址，根据浏览器同源策略，是会报跨域错误，解决步骤打开项目的manifest.json文件，以源码视图查看，添加以下代码{ //.

  3. 7nm+跨域计算+极致性价比，这家芯片厂商助攻车企「降本增效」 - 2

    汽车芯片赛道的「卷」，或许超出了所有人的预期。对于单纯TOPS算力的比拼，已经翻篇，如何让车企有的用，用得上，还要用得好，已经是新风向。实际上，在汽车智能化刚刚开始的2018年，彼时类似斑马智行这样的车机系统仅仅是从软件层面改变传统座舱的人机交互体验（从功能机到智能机）。而类似Mobileye这样的ADAS视觉感知系统方案（EyeQ5之前），也仅仅是辅助驾驶的入门级。在高工智能汽车研究院看来，汽车芯片赛道经历了几个发展周期，1.0时代（以2020年上车的高通8155为代表），智能座舱进入硬件变革节点；2.0时代（以2021年上车的英伟达Orin为代表），智能驾驶进入硬件变革节点。而3.0时代，

  4. ruby-on-rails - 如何在 Rails 4 应用程序中启用 CORS - 2

    我正要把我的头发拉出来...从早上开始我就一直在尝试在此Rails应用程序中启用CORS，但它不起作用。我试过了this,使用RackCorsGem,thisanswer还有这个post都没有成功。有人能指出我正确的方向吗？这是我的js:varreq=newXMLHttpRequest();if('withCredentials'inreq){//req.open('GET',"https://api.github.com/users/mralexgray/repos",true);req.open('GET',"http://www.postcoder.lc/postcodes/"+

  5. ruby-on-rails - 无法让 rack-cors 在 rails 应用程序中工作 - 2

    我想在我的Rails应用程序中实现CORS，所以我用谷歌搜索了rack-corsgem吧。我按照README中所说的做了所有事情，相应地更新了Gemfile并像这样更新了application.rb:moduleYourAppclassApplication:any,:methods=>[:get,:post,:options]endendendend但是没有用。无论我做什么，在浏览器控制台中我都不断收到消息:XMLHttpRequest无法加载https://somewebsite.com。Access-Control-Allow-Origin不允许来源http://0.0.0.0:

  6. javascript - 将 'no-cors' 模式与获取 API 一起使用时，请求 header 未按预期设置 - 2

    我有一个请求类型似乎正在改变的抓取，这弄乱了我的帖子。我提交我的基本表格(只有一个字段)。这是提取。handleSubmit(event,data){//alert('Anamewassubmitted:'+this.state.value);event.preventDefault();console.log("SUBMITSTATE::",this.state.value);return(fetch("//localhost:5000/api/values/dui/",{method:"post",mode:'no-cors',headers:{'Access-Control-Al

  7. javascript - 为什么有些跨域 JSON 请求会失败，而有些则不会？ - 2

    我在理解JSON的安全性方面有点困难，因为通常理论上不应该起作用的事情看起来确实有效。AFAIK，从驻留在域A的页面上的脚本调用，不应该能够从域B接收数据。但是在下面的代码中，对一个外部域的调用失败，而另一个通过。并且两者都不是打包的JSON调用(jsonp)。这是为什么？难道不应该禁止两者都通过浏览器安全检查吗？我在Chrome和Firefox中得到了相同的结果。如果我在dropbox.com上托管以下html页面，Chrome会给我这个错误消息:XMLHttpRequestcannotloadhttp://www.odinfond.no/rest/fund/calc/fundRet

  8. javascript - Firefox 中使用 xhr、客户端证书的跨域 SSL 握手失败 - 2

    设置如下:Firefox(3.x和4b)，具有正确设置和有效的证书，包括客户端证书。带有XMLHttpRequest()类型AJAX调用的网页到不同的子域。所述子域中的自定义Web服务器接受请求，并以宽容的Access-Control-Allow-Origin响应header和要求客户验证。问题是Firefox突然中止了请求(好吧，这就是它在firebug中所说的)。使用openssls_server运行设置而是暗示Firefox实际上甚至不发送客户端证书:140727260153512:error:140890C7:SSLroutines:SSL3_GET_CLIENT_CERTIF

  9. javascript - 对跨源资源共享 (CORS) 的工作方式感到困惑 - 2

    根据我对CORS的了解，它是这样工作的:我有一个站点foo.com，它提供一个页面X。X想将数据发布到另一个域bar.com。如果bar.com启用了CORS(其header生成Access-Control-Allow-Originfoo.com)，那么页面X现在可以将数据发送到bar.com。据我了解，要让CORS正常工作，一切都与在bar.com上进行设置有关，与foo.com无关。这一切都是为了确保bar.com不接受来自任何旧域的请求。但是这真的对我来说没有意义。我认为CORS旨在使foo.com能够决定允许X与谁通信。如果我们回到前面的示例，但这次X被狡猾的脚本破坏，因此它s

  10. javascript - CORS - 服务器端 cookie 未保存在 chrome 浏览器中 - 2

    有一个节点服务器在接受用户的正确凭据时，passportjs通过名为set-cookie的名称在请求header中创建并发送一个sessioncookie。但是当我从我的chrome浏览器中执行ajax请求时接受请求，它不会在客户端添加cookie。因此，当从客户端生成新请求时，服务器不会对其进行身份验证并抛出401。我很困惑这是浏览器问题还是我从AJAX请求中遗漏了一些东西请帮忙。 最佳答案 如果你使用'fetch'，你需要添加一个键{headers:req.headers,credentials:'include'}

随机推荐