使用 angular4 的 CORS 问题

Posted

技术标签:

【中文标题】使用 angular4 的 CORS 问题【英文标题】：CORS ISSUE using angular4 【发布时间】：2018-07-14 21:01:00 【问题描述】：

我正在使用 Angular 4 应用程序。我正面临 CORS 问题。

对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://localhost:4200' 不允许访问。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

谁能帮我在本地和现场解决这个问题？

【问题讨论】：

编辑拼写和格式 【参考方案1】：

您无需添加任何 Chrome 扩展程序。只需添加以下代码行即可。 这将解决 No 'Access-Control-Allow-Origin' 标头问题。

@CrossOrigin(origins = "http://localhost:4200")

【讨论】：

【参考方案2】： 
    You can use CORS extension in chrome

    https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

    after adding just toggle it and reload the page.


Or you can use xdomain library

Create a proxy.html on your server having below content

<html>
<head>
    <script src="xdomain.min.js" data-master="*"></script>
</head>
<body></body>
</html>

// In script src tag give path of your "xdomain.min.js" 

And in client side add xdomain.min.js file in your index.html file and add below snippet to index.html file


 xdomain.slaves(
     "http://serverIp:serverPort": "/contextPathIfAny/proxy.html"
 );

【讨论】：

你有任何其他解决方案，因为它对于未知用户来说不是更好的解决方案 我在 localhost:4200 但是来自 auth0 的 api 你能告诉我如何在 localhost 中添加 xdomain 在你的服务器上创建一个proxy.html，内容如下 head> // 在脚本 src 标签中给出“xdomain.min.js”的路径并在客户端在 index.html 文件中添加 xdomain.min.js 文件并在下面添加sn-p 到 index.html 文件 xdomain.slaves( "serverIp:serverPort": "/contextPathIfAny/proxy.html" ); 您有任何其他解决方案【参考方案3】：

这是一个后端问题，您需要在后端响应中将“Access-Control-Allow-Origin”标头设置为 * 或将其设置为您的前端域。

【讨论】：

以上是关于使用 angular4 的 CORS 问题的主要内容，如果未能解决你的问题，请参考以下文章

Angular4 CORS 标头包含多个值

CORS 问题 Angular4 & c# web api

带有 PHP Api CORS 请求问题的 Angular4 应用程序

Angular 4 call couchdb有CORS错误，但提琴手中没有出现预检

net.core 和 angular4 应用程序的 Cors 问题 - 适用于 azurewebsites.net 域而不是自定义

Angular4 ASP.NET Core 1.2 Windows Authentication CORS for PUT 和 POST 给出 401