javascript 绕过 Chrome 中的 CORS 问题

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/54563538/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-29 10:24:43  来源:igfitidea点击:

Bypassing CORS issue in Chrome

javascriptgoogle-chrome

提问by ak0053792

We are facing an issue where using Chrome request via XMLHTTPRequest is getting failed with below error:

我们面临一个问题,即通过 XMLHTTPRequest 使用 Chrome 请求失败并出现以下错误:

Failed to load <server url>: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<client domain>' is therefore not allowed access.

加载失败<server url>:请求的资源上不存在“Access-Control-Allow-Origin”标头。<client domain>因此不允许访问源“ ”。

This error is Chrome specific since we are not getting this issue in IE. Is there anyway to bypass this error in JavaScript.

这个错误是 Chrome 特有的,因为我们在 IE 中没有遇到这个问题。有没有办法绕过 JavaScript 中的这个错误。

回答by rickvdbosch

No, fortunately there is not.

不,幸运的是没有。

The same-origin policy is an security concept implemented by browsers to prevent Javascript code from making requests against a different origin/domain than the one from which it was served. So enabling developers to bypass this from Javascript would be a bad thing.

同源策略是浏览器实现的一种安全概念,用于防止 Javascript 代码向与提供它的源/域不同的源/域发出请求。因此,让开发人员绕过 Javascript 将是一件坏事。

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin. A web application makes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, and port) than its own origin.

跨源资源共享 (CORS) 是一种机制,它使用额外的 HTTP 标头告诉浏览器让在一个源(域)运行的 Web 应用程序有权访问来自不同源的服务器的选定资源。当 Web 应用程序请求与自己的来源具有不同来源(域、协议和端口)的资源时,它会发出跨源 HTTP 请求。

Source: Cross-Origin Resource Sharing (CORS)

来源:跨域资源共享(CORS)

If you're in control of the API:
Add an Access-Control-Allow-Originheader containing the domain your requests are originating from.

如果您控制 API
添加一个Access-Control-Allow-Origin包含您的请求源自的域的标头。

If you're not in control of the API:
Ask the developer of the API to have your domain added to an Access-Control-Allow-Originheader.

如果您无法控制 API
API开发人员将您的域添加到Access-Control-Allow-Origin标头中。

EDIT:
Adding the correct header will not 'make the request an OPTIONSrequest while the server only accepts POST'.
The OPTIONSrequest is a preflight requestto check to see if the CORS call can actually be made. If the preflight request has the correct header, the POSTrequest will follow as you can see in the image below:

编辑:
添加正确的标头不会“使请求成为OPTIONS请求,而服务器只接受POST”。
OPTIONS请求是一个预检请求,用于检查是否可以实际进行 CORS 调用。如果预检请求具有正确的标头,则POST请求将遵循,如下图所示:

OPTIONS before POST

OPTIONS before POST

You can find all of the basic CORS information in the article Understanding CORS

您可以在了解 CORS一文中找到所有基本的 CORS 信息

回答by cb64

Although its limited, can try to use CORS anywhere https://github.com/Rob--W/cors-anywhereor the chrome extension herethat allows you to bypass CORS (make sure you turn this off when not testing as it will cause issues with requests from other websites)

虽然它有限,但可以尝试在任何地方使用 CORS https://github.com/Rob--W/cors-anywhere这里的 chrome 扩展允许您绕过 CORS(确保在不测试时关闭它,因为它会导致来自其他网站的请求出现问题)