Javascript XMLHttpRequest 无法加载 XXX No 'Access-Control-Allow-Origin' 标头
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/35553500/
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
XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header
提问by Peter David Carter
tl;dr; About the Same Origin Policy
tl;博士; 关于同源策略
I have a Grunt process which initiates an instance of express.js server. This was working absolutely fine up until just now when it started serving a blank page with the following appearing in the error log in the developer's console in Chrome (latest version):
我有一个启动 express.js 服务器实例的 Grunt 进程。直到现在它开始提供一个空白页面时,它一直工作得非常好,Chrome(最新版本)的开发人员控制台的错误日志中出现以下内容:
XMLHttpRequest cannot load https://www.example.com/No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4300' is therefore not allowed access.
XMLHttpRequest 无法加载https://www.example.com/请求的资源上不存在“Access-Control-Allow-Origin”标头。因此,不允许访问Origin ' http://localhost:4300'。
What is stopping me from accessing the page?
是什么阻止我访问该页面?
回答by Quentin
tl;dr —?There's a summary at the end and headings in the answer to make it easier to find the relevant parts. Reading everything is recommended though as it provides useful background for understanding the whythat makes seeing how the howapplies in different circumstances easier.
tl;dr —?结尾有摘要,答案中有标题,可以更轻松地找到相关部分。建议阅读所有内容,因为它为理解原因提供了有用的背景知识,从而更容易了解如何在不同情况下应用。
About the Same Origin Policy
关于同源策略
This is the Same Origin Policy. It is a security feature implemented by browsers.
这是同源策略。它是由浏览器实现的安全功能。
Your particular case is showing how it is implemented for XMLHttpRequest (and you'll get identical results if you were to use fetch), but it also applies to other things (such as images loaded onto a <canvas>
or documents loaded into an <iframe>
), just with slightly different implementations.
您的特定案例展示了它是如何为 XMLHttpRequest 实现的(如果您使用 fetch,您将获得相同的结果),但它也适用于其他事物(例如加载到 a 上的图像<canvas>
或加载到 a 中的文档<iframe>
),只需使用略有不同的实现。
(Weirdly, it also applies to CSS fonts, but that is because found foundries insisted on DRM and not for the security issues that the Same Origin Policy usually covers).
(奇怪的是,它也适用于 CSS 字体,但那是因为代工厂坚持 DRM 而不是同源策略通常涵盖的安全问题)。
The standard scenario that demonstrates the need for the SOP can be demonstrated with three characters:
证明需要 SOP 的标准场景可以用三个字符来证明:
- Alice is a person with a web browser
- Bob runs a website (
https://www.[website].com/
in your example) - Mallory runs a website (
http://localhost:4300
in your example)
- 爱丽丝是一个拥有网络浏览器的人
- 鲍勃经营一个网站(
https://www.[website].com/
在你的例子中) - Mallory 经营一个网站(
http://localhost:4300
在你的例子中)
Alice is logged into Bob's site and has some confidential data there. Perhaps it is a company intranet (accessible only to browsers on the LAN), or her online banking (accessible only with a cookie you get after entering a username and password).
Alice 登录到 Bob 的站点并在那里拥有一些机密数据。也许是公司内部网(只能通过 LAN 上的浏览器访问),或者她的网上银行(只能通过输入用户名和密码后获得的 cookie 才能访问)。
Alice visits Mallory's website which has some JavaScript that causes Alice's browser to make an HTTP request to Bob's website (from her IP address with her cookies, etc). This could be as simple as using XMLHttpRequest
and reading the responseText
.
Alice 访问 Mallory 的网站,该网站具有一些 JavaScript,导致 Alice 的浏览器向 Bob 的网站发出 HTTP 请求(从她的 IP 地址和她的 cookie 等)。这可能就像使用XMLHttpRequest
和阅读responseText
.
The browser's Same Origin Policy prevents that JavaScript from reading the data returned by Bob's website (which Bob and Alice don't want Mallory to access). (Note that you can, for example, display an image using an <img>
element across origins because the content of the image is not exposed to JavaScript (or Mallory) … unless you throw canvas into the mix in which case you willgenerate a same-origin violation error).
浏览器的同源策略会阻止 JavaScript 读取 Bob 网站返回的数据(Bob 和 Alice 不希望 Mallory 访问该网站)。(请注意,例如,您可以使用<img>
跨源元素显示图像,因为图像的内容不会暴露给 JavaScript(或 Mallory)……除非您将画布放入混合中,在这种情况下,您将生成同源违规错误)。
Why the Same Origin Policy applies when you don't think it should
为什么当您认为不应该适用同源政策时
For any given URL it is possible that the SOP is not needed. A couple of common scenarios where this is the case are:
对于任何给定的 URL,可能不需要 SOP。出现这种情况的几种常见情况是:
- Alice, Bob and Mallory are the same person.
- Bob is providing entirely public information
- Alice、Bob 和 Mallory 是同一个人。
- 鲍勃提供完全公开的信息
… but the browser has no way of knowing if either of the above are true, so trust is not automatic and the SOP is applied. Permission has to be granted explicitly before the browser will give the data it was given to a different website.
……但浏览器无法知道上述任何一个是否属实,因此信任不是自动的,并且应用了 SOP。在浏览器将其提供给不同网站的数据之前,必须明确授予权限。
Why the Same Origin Policy only applies to JavaScript in a web page
为什么同源策略仅适用于网页中的 JavaScript
Browser extensions*
, the Network tab in browser developer tools and applications like Postman are installed software. They aren't passing data from one website to the JavaScript belonging to a different website just because you visited that different website. Installing software usually takes a more conscious choice.
浏览器扩展*
、浏览器开发工具中的网络选项卡和 Postman 等应用程序都是安装软件。它们不会仅仅因为您访问了不同的网站就将数据从一个网站传递到属于不同网站的 JavaScript 。安装软件通常需要更谨慎的选择。
There isn't a third party (Mallory) who is considered a risk.
没有第三方 (Mallory) 被视为风险。
*
Browser extensions do need to be written carefully to avoid cross-origin issues. See the Chrome documentation for example.
*
浏览器扩展确实需要仔细编写以避免跨域问题。例如,请参阅 Chrome 文档。
Why you can display data in the page without reading it with JS
为什么不用JS读取就可以在页面中显示数据
There are a number of circumstances where Mallory's site can cause a browser to fetch data from a third party and display it (e.g. by adding an <img>
element to display an image). It isn't possible for Mallory's JavaScript to read the data in that resource though, only Alice's browser and Bob's server can do that, so it is still secure.
在许多情况下,Mallory 的站点会导致浏览器从第三方获取数据并显示它(例如,通过添加<img>
元素来显示图像)。Mallory 的 JavaScript 不可能读取该资源中的数据,只有 Alice 的浏览器和 Bob 的服务器可以这样做,所以它仍然是安全的。
CORS
CORS
The Access-Control-Allow-Origin
HTTP responseheader referred to in the error message is part of the CORSstandard which allows Bob to explicitly grant permission to Mallory's site to access the data via Alice's browser.
错误消息中引用的Access-Control-Allow-Origin
HTTP响应标头是CORS标准的一部分,该标准允许 Bob 明确授予 Mallory 站点通过 Alice 的浏览器访问数据的权限。
A basic implementation would just include:
一个基本的实现只包括:
Access-Control-Allow-Origin: *
… in the response headers to permit any website to read the data.
...在响应头中允许任何网站读取数据。
Access-Control-Allow-Origin: http://example.com/
… would allow only a specific site to access it, and Bob can dynamically generate that based on the Origin
requestheader to permit multiple, but not all, sites to access it.
...将只允许特定站点访问它,并且 Bob 可以根据Origin
请求标头动态生成它以允许多个但不是所有站点访问它。
The specifics of how Bob sets that response header depend on Bob's HTTP server and/or server-side programming language. There is a collection of guides for various common configurationsthat might help.
Bob 如何设置响应头的细节取决于 Bob 的 HTTP 服务器和/或服务器端编程语言。有一系列可能有帮助的各种常见配置的指南。
NB: Some requests are complex and send a preflightOPTIONS request that the server will have to respond to before the browser will send the GET/POST/PUT/Whatever request that the JS wants to make. Implementations of CORS that only add Access-Control-Allow-Origin
to specific URLs often get tripped up by this.
注意:有些请求很复杂,会发送一个预检OPTIONS 请求,在浏览器发送 JS 想要发出的 GET/POST/PUT/Whatever 请求之前,服务器必须响应该请求。仅添加Access-Control-Allow-Origin
到特定 URL的 CORS 实现通常会被此绊倒。
Obviously granting permission via CORS is something Bob would only do only if either:
显然,通过 CORS 授予权限是 Bob 仅在以下情况下才会执行的操作:
- The data was not private or
- Mallory was trusted
- 数据不是私人的或
- 马洛里被信任
But I'm not Bob!
但我不是鲍勃!
There is no standard mechanism for Malloryto add this header because it has to come from Bob's website, which she does not control.
Mallory没有标准机制可以添加此标头,因为它必须来自 Bob 的网站,而她无法控制该网站。
If Bob is running a public API then there might be a mechanism to turn on CORS (perhaps by formatting the request in a certain way, or a config option after logging into a Developer Portal site for Bob's site). This will have to be a mechanism implemented by Bob though. Mallory could read the documentation on Bob's site to see if something is available, or she could talk to Bob and ask him to implement CORS.
如果 Bob 正在运行公共 API,那么可能有一种机制可以打开 CORS(可能通过以某种方式格式化请求,或者登录到 Bob 站点的开发人员门户站点后的配置选项)。不过,这必须是 Bob 实施的一种机制。Mallory 可以阅读 Bob 站点上的文档以查看是否有可用的内容,或者她可以与 Bob 交谈并要求他实施 CORS。
Error messages which mention "Response for preflight"
提及“预检响应”的错误消息
Some cross origin requests are preflighted.
一些跨源请求是预检的。
This happens when (roughly speaking) you try to make a cross-origin request that:
当(粗略地说)您尝试发出跨域请求时会发生这种情况:
- Includes credentials like cookies
- Couldn't be generated with a regular HTML form (e.g. has custom headers or a Content-Type that you couldn't use in a form's
enctype
).
- 包括 cookie 等凭据
- 无法使用常规 HTML 表单生成(例如,具有无法在表单的 中使用的自定义标题或内容类型
enctype
)。
If you are correctly doing something that needs a preflight
如果你正确地做一些需要预检的事情
In these cases then the rest of this answer still appliesbut you also need to make sure that the server can listen for the preflight request (which will be OPTIONS
(and not GET
, POST
or whatever you were trying to send) and respond to it with the right Access-Control-Allow-Origin
header but also Access-Control-Allow-Methods
and Access-Control-Allow-Headers
to allow your specific HTTP methods or headers.
在这些情况下,此答案的其余部分仍然适用,但您还需要确保服务器可以侦听预检请求(将是OPTIONS
(而不是GET
,POST
或您尝试发送的任何内容)并以正确的方式响应它Access-Control-Allow-Origin
包头,而且Access-Control-Allow-Methods
并Access-Control-Allow-Headers
允许特定HTTP方法或标题。
If you are triggering a preflight by mistake
如果您错误地触发了预检
Sometimes people make mistakes when trying to construct Ajax requests, and sometimes these trigger the need for a preflight. If the API is designed to allow cross-origin requests, but doesn't require anything that would need a preflight, then this can break access.
有时人们在尝试构建 Ajax 请求时会出错,有时这些会触发预检的需要。如果 API 旨在允许跨域请求,但不需要任何需要预检的内容,那么这可能会中断访问。
Common mistakes that trigger this include:
引发此问题的常见错误包括:
- trying to put
Access-Control-Allow-Origin
and other CORS response headers on the request. These don't belong on the request, don't do anything helpful (what would be the point of a permissions system where you could grant yourself permission?), and must appear only on the response. - trying to put a
Content-Type: application/json
header on a GET request that has no request body to describe the content of (typically when the author confusesContent-Type
andAccept
).
- 尝试
Access-Control-Allow-Origin
在请求上放置和其他 CORS 响应标头。这些不属于请求,不做任何有用的事情(您可以授予自己权限的权限系统有什么意义?),并且必须只出现在响应中。 - 试图
Content-Type: application/json
在没有请求正文来描述内容的 GET 请求上放置一个标头(通常是当作者混淆Content-Type
和 时Accept
)。
In either of these cases, removing the extra request header will often be enough to avoid the need for a preflight (which will solve the problem when communicating with APIs that support simple requests but not preflighted requests).
在这两种情况中的任何一种情况下,删除额外的请求标头通常就足以避免需要预检(这将解决与支持简单请求但不支持预检请求的 API 通信时的问题)。
Opaque responses
不透明的反应
Sometimes you need to make an HTTP request, but you don't need to read the response. e.g. if you are posting a log message to the server for recording.
有时您需要发出 HTTP 请求,但不需要读取响应。例如,如果您将日志消息发布到服务器进行记录。
If you are using the fetch
API(rather than XMLHttpRequest
), then you can configure it to not try to use CORS.
如果您使用的是fetch
API(而不是XMLHttpRequest
),那么您可以将其配置为不尝试使用 CORS。
Note that this won't let you do anything that you require CORS to do. You will not be able to read the response. You will not be able to make a request that requires a preflight.
请注意,这不会让您执行需要 CORS 执行的任何操作。您将无法阅读回复。您将无法提出需要预检的请求。
It will let you make a simple request, not see the response, and not fill the Developer Console with error messages.
它将让您发出一个简单的请求,看不到响应,并且不会用错误消息填充开发人员控制台。
How to do it is explained by the Chrome error message given when you make a request using fetch
and don't get permission to view the response with CORS:
当您使用fetch
CORS发出请求但未获得查看使用 CORS 响应的权限时,Chrome 错误消息解释了如何执行此操作:
Access to fetch at '
https://example.com/
' from origin 'https://example.net
' has been blocked by CORS policy: No 'Access-Control-Allow-Origin
' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
https://example.com/
从源“https://example.net
”获取“ ”的访问已被 CORS 策略阻止:Access-Control-Allow-Origin
请求的资源上不存在“ ”标头。如果不透明响应满足您的需求,请将请求的模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。
Thus:
因此:
fetch("http://example.com", { mode: "no-cors" });
Alternatives to CORS
CORS 的替代品
JSONP
JSONP
Bob could also provide the data using a hack like JSONPwhich is how people did cross-origin Ajax before CORS came along.
Bob 还可以使用像JSONP这样的 hack 来提供数据,这就是人们在 CORS 出现之前进行跨源 Ajax 的方式。
It works by presenting the data in the form of a JavaScript program which injects the data into Mallory's page.
它的工作原理是以 JavaScript 程序的形式呈现数据,该程序将数据注入 Mallory 的页面。
It requires that Mallory trust Bob not to provide malicious code.
它要求 Mallory 信任 Bob 不会提供恶意代码。
Note the common theme: The site providing the data has to tell the browser that it is OK for a third party site to access the data it is sending to the browser.
请注意共同的主题:提供数据的站点必须告诉浏览器第三方站点可以访问它发送到浏览器的数据。
Since JSONP works by appending a <script>
element to load the data in the form of a JavaScript program which calls a function already in the page, attempting to use the JSONP technique on a URL which returns JSON will fail — typically with a CORB error — because JSON is not JavaScript.
由于 JSONP 的工作原理是通过附加一个<script>
元素来以 JavaScript 程序的形式加载数据,该程序调用页面中已有的函数,因此尝试在返回 JSON 的 URL 上使用 JSONP 技术将失败——通常会出现 CORB 错误——因为 JSON不是 JavaScript。
Move the two resources to a single Origin
将两个资源移动到一个 Origin
If the HTML document the JS runs in and the URL being requested are on the same origin (sharing the same scheme, hostname, and port) then they Same Origin Policy grants permission by default. CORS is not needed.
如果运行 JS 的 HTML 文档和被请求的 URL 来自同一个源(共享相同的方案、主机名和端口),那么它们的同源策略默认授予权限。不需要 CORS。
A Proxy
代理
Mallory coulduse server-side code to fetch the data (which she could then pass from her server to Alice's browser through HTTP as usual).
Mallory可以使用服务器端代码来获取数据(然后她可以像往常一样通过 HTTP 从她的服务器传递到 Alice 的浏览器)。
It will either:
它要么:
- add CORS headers
- convert the response to JSONP
- exist on the same origin as the HTML document
- 添加 CORS 标头
- 将响应转换为 JSONP
- 与 HTML 文档同源
That server-side code could be written & hosted by a third party (such as CORS Anywhere). Note the privacy implications of this: The third party can monitor who proxies what across their servers.
该服务器端代码可以由第三方(例如 CORS Anywhere)编写和托管。请注意这对隐私的影响:第三方可以监控谁在他们的服务器上代理什么。
Bob wouldn't need to grant any permissions for that to happen.
Bob 不需要为此授予任何权限。
This would be fine since that is just between Mallory and Bob. There is no way for Bob to think that Mallory is Alice and to provide Mallory with data that should be kept confidential between Alice and Bob.
这很好,因为那只是在 Mallory 和 Bob 之间。Bob 无法认为 Mallory 就是 Alice,也无法向 Mallory 提供应在 Alice 和 Bob 之间保密的数据。
Consequently, Mallory can only use this technique to read publicdata.
因此,Mallory 只能使用这种技术来读取公共数据。
Writing something other than a web app
编写 Web 应用程序以外的其他内容
As noted in the section "Why the Same Origin Policy only applies to JavaScript in a web page", you can avoid the SOP by not writing JavaScript in a webpage.
如“为什么同源策略仅适用于网页中的 JavaScript”一节所述,您可以通过不在网页中编写 JavaScript 来避免 SOP。
That doesn't mean you can't continue to use JavaScript and HTML, but you could distribute it using some other mechanism, such as Node-WebKit or PhoneGap.
这并不意味着您不能继续使用 JavaScript 和 HTML,但您可以使用其他一些机制来分发它,例如 Node-WebKit 或 PhoneGap。
Browser extensions
浏览器扩展
It is possible for a browser extension to inject the CORS headers in the response before the Same Origin Policy is applied.
在应用同源策略之前,浏览器扩展可能会在响应中注入 CORS 标头。
These can be useful for development, but are not practical for a production site (asking every user of your site to install a browser extension that disables a security feature of their browser is unreasonable).
这些对开发很有用,但对生产站点不实用(要求站点的每个用户安装浏览器扩展来禁用其浏览器的安全功能是不合理的)。
They also tend to work only with simple requests (failing when handling preflight OPTIONS requests).
它们也倾向于只处理简单的请求(在处理预检 OPTIONS 请求时失败)。
Having a proper development environment with a local development serveris usually a better approach.
使用本地开发服务器拥有合适的开发环境 通常是更好的方法。
Other security risks
其他安全风险
Note that SOP / CORS do not mitigate XSS, CSRF, or SQL Injectionattacks which need to be handled independently.
请注意,SOP / CORS 不会减轻需要独立处理的XSS、CSRF或SQL 注入攻击。
Summary
概括
- There is nothing you can do in yourclient-side code that will enable CORS access to someone else'sserver.
- If you control the server the request is being made to: Add CORS permissions to it.
- If you are friendly with the person who controls it: Get them to add CORS permissions to it.
- If it is a public service:
- Read their API documentation to see what they say about accessing it with client-side JavaScript:
- They might tell you to use specific URLs
- They might support JSONP
- They might not support cross-origin access from client-side code at all (this might be a deliberate decision on security grounds, especially if you have to pass a personalised API Key in each request).
- Make sure you aren't triggering a preflight request you don't need. The API might grant permission for simple requests but not preflighted requests.
- Read their API documentation to see what they say about accessing it with client-side JavaScript:
- If none of the above apply: Get the browser to talk to yourserver instead, and then have your server fetch the data from the other server and pass it on. (There are also third-party hosted services which attach CORS headers to publically accessible resources that you could use).
- 有什么可以做在您的客户端代码,使CORS获得别人别人的服务器。
- 如果您控制服务器,则向其发出请求:向其添加 CORS 权限。
- 如果您与控制它的人友好:让他们为其添加 CORS 权限。
- 如果是公共服务:
- 阅读他们的 API 文档,了解他们对使用客户端 JavaScript 访问它的看法:
- 他们可能会告诉您使用特定的 URL
- 他们可能支持 JSONP
- 它们可能根本不支持来自客户端代码的跨域访问(这可能是出于安全考虑的深思熟虑的决定,尤其是当您必须在每个请求中传递个性化 API 密钥时)。
- 确保您没有触发不需要的预检请求。API 可能会授予简单请求的权限,但不会授予预检请求的权限。
- 阅读他们的 API 文档,了解他们对使用客户端 JavaScript 访问它的看法:
- 如果以上都不适用:让浏览器改为与您的服务器通信,然后让您的服务器从其他服务器获取数据并将其传递。(还有第三方托管服务将 CORS 标头附加到您可以使用的可公开访问的资源)。
回答by Daphoque
Target server must allowed cross-origin request. In order to allow it through express, simply handle http options request :
目标服务器必须允许跨域请求。为了允许它通过 express,只需处理 http 选项请求:
app.options('/url...', function(req, res, next){
res.header('Access-Control-Allow-Origin', "*");
res.header('Access-Control-Allow-Methods', 'POST');
res.header("Access-Control-Allow-Headers", "accept, content-type");
res.header("Access-Control-Max-Age", "1728000");
return res.sendStatus(200);
});
回答by Vishnu
This is happening because of the CORS error. CORS stands for Cross Origin Resource Sharing. In simple words, this error occurs when we try to access a domain/resource from another domain.
这是由于 CORS 错误而发生的。CORS 代表跨源资源共享。简而言之,当我们尝试从另一个域访问域/资源时会发生此错误。
Read More about it here: CORS error with jquery
在此处阅读有关它的更多信息:jquery 的 CORS 错误
To fix this, if you have access to the other domain, you will have to allow Access-Control-Allow-Origin in the server. This can be added in the headers. You can enable this for all the requests/domains or a specific domain.
要解决此问题,如果您有权访问其他域,则必须在服务器中允许 Access-Control-Allow-Origin。这可以添加到标题中。您可以为所有请求/域或特定域启用此功能。
How to get a cross-origin resource sharing (CORS) post request working
These links may help
这些链接可能会有所帮助
回答by zwif
As this isn't mentioned in the accepted answer.
因为在接受的答案中没有提到这一点。
- This is not the case for this exact question, but might help others that search for that problem
- This is something you can do in your client-code to prevent CORS errors in some cases.
- 对于这个确切的问题,情况并非如此,但可能会帮助其他搜索该问题的人
- 在某些情况下,您可以在客户端代码中执行此操作以防止 CORS 错误。
You can make use of Simple Requests.
In order to perform a 'Simple Requests' the request needs to meet several conditions. E.g. only allowing POST
, GET
and HEAD
method, as well as only allowing some given Headers (you can find all conditions here).
您可以使用Simple Requests。
为了执行“简单请求”,请求需要满足几个条件。例如,只允许POST
,GET
和HEAD
方法,以及只允许某些给定的标题(您可以在此处找到所有条件)。
If your client code does not explicit set affected Headers (e.g. "Accept") with a fix value in the request it mightoccur that some clients do set these Headers automatically with some "non-standard" values causing the server to not accept it as Simple Request - which will give you a CORS error.
如果您的客户端代码未在请求中使用固定值显式设置受影响的标头(例如“接受”),则可能会发生某些客户端确实使用一些“非标准”值自动设置这些标头,导致服务器不接受它作为简单请求 - 这会给你一个 CORS 错误。
回答by morph85
This CORS issue wasn't further elaborated (for other causes).
这个 CORS 问题没有进一步阐述(出于其他原因)。
I'm having this issue currently under different reason. My front end is returning 'Access-Control-Allow-Origin' header error as well.
我目前在不同的原因下遇到这个问题。我的前端也返回“Access-Control-Allow-Origin”标头错误。
Just that I've pointed the wrong URL so this header wasn't reflected properly (in which i kept presume it did). localhost (front end) -> call to non secured http (supposed to be https), make sure the API end point from front end is pointing to the correct protocol.
只是我指向了错误的 URL,所以这个标题没有正确反映(我一直假设它确实如此)。localhost(前端)-> 调用非安全 http(应该是 https),确保前端的 API 端点指向正确的协议。
回答by Subhashi
I got the same error in Chrome console.
我在 Chrome 控制台中遇到了同样的错误。
My problem was, I was trying to go to the site using http://
instead of https://
. So there was nothing to fix, just had to go to the same site using https
.
我的问题是,我试图去使用网站http://
代替https://
。所以没有什么要解决的,只需要使用https
.
回答by kira
"Get" request with appending headers transform to "Options" request. So Cors policy problems occur. You have to implement "Options" request to your server.
带有附加标头的“获取”请求转换为“选项”请求。所以出现了 Cors 政策问题。您必须对您的服务器实施“选项”请求。
回答by Perostek Balveda
You should enable CORS to get it working.
您应该启用 CORS 以使其正常工作。