Javascript 如何解决“重定向已被 CORS 策略阻止：没有 'Access-Control-Allow-Origin' 标头”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46522749/
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
How to solve 'Redirect has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header'?
提问by Sharat
I am working on an app using Vue js.
According to my setting I need to pass to a variable to my URL when setting change.
我正在使用Vue js. 根据我的设置，我需要在设置更改时将变量传递给我的 URL。
<!-- language: lang-js -->
$.get('http://172.16.1.157:8002/firstcolumn/' + c1v + '/' + c1b, function (data) {
// some code...
});
But when my app hit on URL, it shows the following message.
但是当我的应用点击 URL 时，它显示以下消息。
Failed to load http://172.16.1.157:8002/firstcolumn/2017-03-01/2017-10-26: Redirect from 'http://172.16.1.157:8002/firstcolumn/2017-03-01/2017-10-26' to 'http://172.16.1.157:8002/firstcolumn/2017-03-01/2017-10-26/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.
采纳答案by altShiftDev
In addition to what awd mentioned about getting the person responsible for the server to reconfigure (an impractical solution for local development) I use a change-origin chrome plugin like this:
除了 awd 提到的让负责服务器的人重新配置（本地开发的不切实际的解决方案）之外，我还使用了一个像这样的更改源 chrome 插件：
You can make your local dev server (ex: localhost:8080)to appear to be coming from 172.16.1.157:8002 or any other domain.
你可以让你local dev server (ex: localhost:8080)的看起来像是来自172.16.1.157:8002 or any other domain.
回答by awd
Ask the person maintaining the server at http://172.16.1.157:8002/to add your hostname to Access-Control-Allow-Origin hosts, the server should return a header similar to the following with the response-
请在http://172.16.1.157:8002/上维护服务器的人员将您的主机名添加到 Access-Control-Allow-Origin 主机，服务器应返回类似于以下内容的标头以及响应 -
Access-Control-Allow-Origin: yourhostname:port
回答by Sharat
Thanks all, I solved by this extension on chrome.
谢谢大家，我通过 chrome 上的这个扩展解决了。
回答by Bhavan Patel
Hello If I understood it right you are doing an XMLHttpRequestto a different domain than your page is on. So the browser is blocking it as it usually allows a request in the same origin for security reasons. You need to do something different when you want to do a cross-domain request. A tutorial about how to achieve that is Using CORS.
您好 如果我理解正确，您正在对与您的页面所在的域不同的域执行XMLHttpRequest。因此浏览器会阻止它，因为出于安全原因，它通常允许来自同一来源的请求。当您想要进行跨域请求时，您需要做一些不同的事情。关于如何实现这一点的教程是Using CORS。
When you are using postman they are not restricted by this policy. Quoted from Cross-Origin XMLHttpRequest:
当您使用邮递员时，他们不受此政策的限制。引自Cross-Origin XMLHttpRequest：
Regular web pages can use the XMLHttpRequest object to send and receive data from remote servers, but they're limited by the same origin policy. Extensions aren't so limited. An extension can talk to remote servers outside of its origin, as long as it first requests cross-origin permissions.
常规网页可以使用 XMLHttpRequest 对象从远程服务器发送和接收数据，但它们受到同源策略的限制。扩展没有那么有限。扩展可以与其源之外的远程服务器通信，只要它首先请求跨源权限。
回答by Pankaj Shinde
To add the CORS authorization to the header using Apache, simply add the following line inside either the <Directory>, <Location>, <Files>or <VirtualHost>sections of your server config (usually located in a *.conf file, such as httpd.conf or apache.conf), or within a .htaccessfile:
到CORS授权添加到使用Apache的头，简单地添加以下线内无论是<Directory>，<Location>，<Files>或<VirtualHost>你的服务器配置（通常位于一个* .conf文件，如httpd.conf中或的apache.conf）的部分，或内一个.htaccess文件：
Header set Access-Control-Allow-Origin "*"
标头集 Access-Control-Allow-Origin "*"
And then restart apache.
然后重启apache。
Altering headers requires the use of mod_headers. Mod_headers is enabled by default in Apache, however, you may want to ensure it's enabled.
更改标头需要使用 mod_headers。Mod_headers 在 Apache 中默认启用，但是，您可能需要确保它已启用。
回答by Manav Mandal
You are making a request to external domain 172.16.1.157:8002/from your local development server that is why it is giving cross origin exception.
Either you have to allow headers Access-Control-Allow-Origin:*in both frontend and backend or alternatively use this extension cors header toggle - chrome extensionunless you host backend and frontend on the same domain.
您正在172.16.1.157:8002/从本地开发服务器向外部域发出请求，这就是它给出跨域异常的原因。您必须Access-Control-Allow-Origin:*在前端和后端都允许标头，或者使用此扩展cors 标头切换 - chrome 扩展，除非您在同一域中托管后端和前端。
回答by Kardi Teknomo
If you have control over your server, you can use PHP:
如果您可以控制服务器，则可以使用 PHP：
<?PHP
header('Access-Control-Allow-Origin: *');
?>
回答by SJX
When you have this problem with Chrome, you don't need an Extension.
Start Chrome from the Console:
chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security
Maybe you have to close all Tabs in Chrome and restart it.
当您在 Chrome 上遇到此问题时，您不需要扩展程序。
从控制台启动 Chrome：
chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security
也许您必须关闭 Chrome 中的所有选项卡并重新启动它。
回答by mma
I had the same problem in my Vue.js and SpringBoot projects. If somebody work with spring you can add this code:
我在 Vue.js 和 SpringBoot 项目中遇到了同样的问题。如果有人使用 spring，您可以添加以下代码：
@Bean
public FilterRegistrationBean simpleCorsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);
// *** URL below needs to match the Vue client URL and port ***
config.setAllowedOrigins(Collections.singletonList("http://localhost:8080"));
config.setAllowedMethods(Collections.singletonList("*"));
config.setAllowedHeaders(Collections.singletonList("*"));
source.registerCorsConfiguration("/**", config);
FilterRegistrationBean bean = new FilterRegistrationBean<>(new CorsFilter(source));
bean.setOrder(Ordered.HIGHEST_PRECEDENCE);
return bean;
}
I found solution in this article Build a Simple CRUD App with Spring Boot and Vue.js
我在这篇文章中找到了解决方案Build a Simple CRUD App with Spring Boot and Vue.js
回答by Prabhash Rathnayake
You can solve this temporarily by using the Firefox add-on, CORS Everywhere. Just open Firefox, press Ctrl+Shift+A , search the add-on and add it!
您可以使用 Firefox 附加组件CORS Everywhere暂时解决此问题。只需打开 Firefox，按 Ctrl+Shift+A ，搜索插件并添加它！
