laravel 'Access-Control-Allow-Origin' 标头的值 'http://localhost:4200' 不等于提供的来源
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/53087341/
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
The 'Access-Control-Allow-Origin' header has a value 'http://localhost:4200' that is not equal to the supplied origin
提问by QuietSeditionist
(continuation of error message in title) " Origin 'http://127.0.0.1:4200' is therefore not allowed access."
（标题中错误消息的延续）“因此不允许访问Origin ' http://127.0.0.1:4200'。”
I am unable to run the same Angular 5 site on two different domains when working with the same API.
使用相同的 API 时，我无法在两个不同的域上运行相同的 Angular 5 站点。
This error message is coming from Chrome. The error in Firefox is:
此错误消息来自 Chrome。Firefox 中的错误是：
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://myapitest.local/v1/subscription/current/products. (Reason: CORS header ‘Access-Control-Allow-Origin' does not match ‘http://127.0.0.1:4200')
跨域请求被阻止：同源策略不允许读取http://myapitest.local/v1/subscription/current/products 上的远程资源。（原因：CORS 标头“Access-Control-Allow-Origin”与“ http://127.0.0.1:4200”不匹配）
I noticed this when working on a white-labeled version of our Angular app that will be running on an alternative URL from our regular app, but still using the same Laravel api running on the same URL. I've added the appropriate CORS configuration to Laravel, this appears to be a browser issue - not sure how to get around it.
我在处理 Angular 应用程序的白标版本时注意到了这一点，该版本将在常规应用程序的替代 URL 上运行，但仍使用在同一 URL 上运行的相同 Laravel api。我已将适当的 CORS 配置添加到 Laravel，这似乎是浏览器问题 - 不知道如何解决它。
I have recreated this at localhost by changing from localhost:4200 to 127.0.0.1:4200 for instance.
例如，我通过从 localhost:4200 更改为 127.0.0.1:4200 在 localhost 重新创建了它。
Oddly, the preflight seems to be successful with correct CORS headers.
奇怪的是，使用正确的 CORS 标头，预检似乎成功了。
However, on the GET, it seems to come back with the WRONG Access-Control-Allow-Origin header on the response.
但是，在 GET 上，它似乎在响应中返回了 WRONG Access-Control-Allow-Origin 标头。
Worth noting here that changing my Allowed Origins in the API to allow all ('*') does not fix this issue.
值得注意的是，在 API 中更改我的 Allowed Origins 以允许所有 ('*') 并不能解决此问题。
I'm not sure what other information or code I could provide to make this clearer. Thanks.
我不确定我可以提供哪些其他信息或代码来更清楚地说明这一点。谢谢。
回答by Mesut G?lcük
Let's assume your api runs on 8080 and your angular code on 4200.
假设您的 api 在 8080 上运行，而您的 angular 代码在 4200 上运行。
In your angular app create a file called proxy.conf.json
在你的 angular 应用程序中创建一个名为 proxy.conf.json 的文件
{
"/api/": {
"target": "http://localhost:8080/",
"secure": false,
"changeOrigin": true
}
}
Start angular app using this command
使用此命令启动 angular 应用程序
ng serve --port 4200 --proxy-config proxy.conf.json
With this configuration when you call localhost:4200/api you it will call 8080 and it won't have any CORS error
使用此配置，当您调用 localhost:4200/api 时，它会调用 8080 并且不会有任何 CORS 错误
回答by Saddam Pojee
Setup a reverse proxy server and configure paths for both the domains.
Nginx Guide
设置反向代理服务器并为两个域配置路径。
Nginx 指南
This will allow you to access everything via http://localhost/
Let's assume:
A -> Angular App (localhost:4200)
B -> Your other domain API (myapitest.local)
这将允许您通过http://localhost/访问所有内容
让我们假设：
A -> Angular App (localhost:4200)
B -> 您的其他域 API (myapitest.local)
Example Flow:
- Browser Request(http://localhost/angular) -> Nginx -> A
- Load Data from backend -> Nginx -> B
示例流程：
- 浏览器请求（http://localhost/angular） -> Nginx -> A
- 从后端加载数据 -> Nginx -> B
So, with the help of Nginx, you will be able to access "A" from http://localhost/and "B" also from http://localhost/
Since, the origin is same, there will be no CORS error.
因此，在 Nginx 的帮助下，您将能够从http://localhost/访问“A”，
也可以从http://localhost/访问“ B”
，因为来源相同，不会出现 CORS 错误。
回答by Strom
The problem is in the Name mapping. Since a server pool may have multiple IP addresses, most browsers map the IP address to a name. This is normally done through the requested DNS name. In your case there is no name, so it is looking up the IP address in the hosts file(/etc/hosts on Linux or C:\Windows\System32\Drivers\etc\Hosts on Windows) and returning the name from there.
问题出在名称映射中。由于服务器池可能有多个 IP 地址，因此大多数浏览器将 IP 地址映射到一个名称。这通常是通过请求的 DNS 名称完成的。在您的情况下，没有名称，因此它会在主机文件（Linux 上的 /etc/hosts 或 Windows 上的 C:\Windows\System32\Drivers\etc\Hosts）中查找 IP 地址并从那里返回名称。
Since you need to test across domains(act as 2 separate servers), add a line to your hosts file pointing myapitest.local to 127.0.0.2 . And a line myapitest2.local to 127.0.0.3 . This will allow your local naming to match the IP addresses and with proper configuration(specifying a specific listening address to bind to, for each server instance) each server instance can then run on port 80.
由于您需要跨域进行测试（充当 2 个独立的服务器），请在您的主机文件中添加一行，将 myapitest.local 指向 127.0.0.2 。还有一行 myapitest2.local 到 127.0.0.3 。这将允许您的本地命名与 IP 地址匹配，并通过适当的配置（为每个服务器实例指定要绑定到的特定侦听地址）然后每个服务器实例可以在端口 80 上运行。
Use names in all Cross origin requests and authorizations.
在所有跨源请求和授权中使用名称。
Edit
编辑
The wildcard does not work due to Access-Control-Allow-Credentials: true.
由于Access-Control-Allow-Credentials: true.
On the dev-api.ourdomain.com server:
Add a Response Headerto the route file Routes/api.php that builds the Access-Control-Allow-Origin:header for approved domains. You can also apply this as Middleware, but for simplicity, I will demonstrate with simple routes. This must also be done for the preflight routes.
在 dev-api.ourdomain.com 服务器上：将响应头添加到路由文件 Routes/api.php 中，Access-Control-Allow-Origin:为批准的域构建头。您也可以将其用作中间件，但为了简单起见，我将使用简单的路由进行演示。这也必须对飞行前航线进行。
Route::get('/method/{id}', function (Request $request, $id) {
$retval = method($id);
$origin_allowed = $request->header('HTTP_ORIGIN');
$allowed = array("dev.ourdomain.com", "dev.alternatedomain.com");
if(in_array($origin_domain, $allowed))
return ($retval)->header('Access-Control-Allow-Origin:',$origin_domain);
else
return "Unauthorized";
});
This is just example code to demonstrate the concept.
这只是演示该概念的示例代码。
Make sure you are clearing HTTP authorizations and csrf tokens on logout.
确保在注销时清除 HTTP 授权和 csrf 令牌。
回答by esakki
You can set proxy for the request provided by the angular webpack developement server. By using the proxy you can change the backend URL as originated from the angular domain hosted URL. This will be achieved by --proxy-configin your serve command or package.json. so that angular will be run in different URls with same backend service.
您可以为 angular webpack 开发服务器提供的请求设置代理。通过使用代理，您可以更改源自角域托管 URL 的后端 URL。这将通过服务命令或 package.json 中的--proxy-config来实现。以便 angular 将在具有相同后端服务的不同 URl 中运行。
add a file named proxy.conf.json near the package.json. from your Request get URL add /proxy
在 package.json 附近添加一个名为 proxy.conf.json 的文件。从您的请求获取 URL 添加/proxy
In your proxy.conf file add this
在你的 proxy.conf 文件中添加这个
{
"/proxy": {
"target": "http://localhost:3000",
"secure": false,
"pathRewrite": {
"^/proxy": ""
}
}
change your serve command as
将您的服务命令更改为
ng serve --proxy-config proxy.conf.json --port 4200 --host 0.0.0.0
ng serve --proxy-config proxy.conf.json --port 4200 --host 0.0.0.0
or
或者
in your angular.json change the serve target
在您的 angular.json 中更改服务目标
"architect": {
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "your-application-name:build",
"proxyConfig": "proxy.conf.json"
},
Note: make sure to add /proxy in your Http service URL and Proxy configuration in only for the development purpose
注意：确保在您的 Http 服务 URL 和 Proxy 配置中添加 /proxy 仅用于开发目的
For the production environment You should configure in the webservers.
对于生产环境，您应该在 webservers 中进行配置。
回答by Hamelraj
i think you using web.phpfor this routes on the top of the file please use this and try
我想你在文件顶部使用web.php 来做这个路由，请使用它并尝试
<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE');
header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization, X-CSRF-Token");
Route::get('/login', 'Auth\LoginController@showLoginForm');
回答by Shaielndra Gupta
add this in your public/index.phpfile
将此添加到您的public/index.php文件中
header('Access-Control-Allow-Origin: *');
