带有Java后端的Angular返回CORS错误

Question

我正在尝试将Angular Web连接到Java后端。为此，我使用不同的端点。返回

已被 CORS 策略阻止：无"访问控制允许源" 标头存在于请求的资源上。

我尝试在角度中添加这样的proxy.conf.json

。

{
"/URL/*": {
"target": "ENDPOINT",
"secure": false,
"changeOrigin": true
}
}

我也尝试修改.htaccess

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

没有作品。

那么：在角度端点中启用 CORS 的正确方法是什么？

更新

httpoptions in angular

const httpOptions = {
headers: new HttpHeaders({
Authorization: "Token " + localStorage.getItem("token")
})
};

Answer 1

欢迎来到现代浏览器的糟糕世界：-(

如果您使用Authorization标题，您的浏览器将执行预检请求，以检查您的浏览器是否没有通过您的网站被弄乱并检查响应。特别是，他将检查Access-Control-Allow-Origin是否有效，并且对于包含Authorization标头的请求，这意味着通配符(*(无效！要使后端 CORS 可，您必须允许请求的来源作为显式Access-Control-Allow-Origin这导致许多后端开发人员简单地获取Origin请求标头的值并将其放入Access-Control-Allow-Origin响应标头中。

因此，当您的浏览器在预检期间请求后端时，您的后端必须做出类似于

Access-Control-Allow-Origin: <The requesting Origin must be included>
Access-Control-Allow-Headers: origin, x-requested-with, content-type, authorization
Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS
Access-Control-Allow-Credentials: true

更多关于这一点可以在Mozilla的CORS页面上找到：https://developer.mozilla.org/de/docs/Web/HTTP/CORS