即使在设置 CORS 标头和服务器响应之后，Angular 和 laravel 的 CORS 问题[重复]答案

【问题标题】：CORS problem with Angular and laravel even after setting the CORS header and server response [duplicate]即使在设置 CORS 标头和服务器响应之后，Angular 和 laravel 的 CORS 问题[重复]
【发布时间】：2019-10-07 05:52:04
【问题描述】：

我是 Angular 新手，面临一些 CORS 问题。我尝试了所有可能的解决方案，包括设置 CORS 标头和服务器端更改。但还是不行。

我用 'Access-Control-Allow-Origin': '*' 标题更改了服务器端作为响应。我尝试使用邮递员，它工作正常并给出标题响应。我还在发送请求时在我的 Angular 应用程序中设置了标题。但仍然给出错误。这是给予：

从源“http://localhost:4200”访问“http://skewcommerce.test/api/user/add/”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：不允许重定向预检请求。

这是我发送请求的服务。

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {HttpHeaders} from '@angular/common/http';
import {environment} from '../../environments/environment';

@Injectable({
providedIn: 'root'
})

export class ApiService {
baseUrl = environment.APIUrl;
token: any;

constructor(private http: HttpClient) {
}


postData(url, data) {
const httpOptions =  new HttpHeaders({
        'Access-Control-Allow-Origin': '*',
        'Content-Type':  'application/json',
        });


return this.http.post(this.baseUrl + url + '/', data, {headers : httpOptions});
   }
}

请帮助我知道我做错了什么。 :(

【问题讨论】：

需要在服务器端设置，这里查看stackoverflow.com/questions/56133333/…
我已经这样做了..我测试了 api，它给了我这些标题作为响应。
你能分享一张你的响应标题的图片吗？
Access-Control-Allow-Origin →* Access-Control-Allow-Credentials →true Cache-Control →no-cache, private Access-Control-Allow-Methods →GET, POST, PUT, DELETE , 选项 Access-Control-Allow-Headers →X-Requested-With, X-Auth-Token, Content-Type, Origin, Cache-Control, Pragma, Authorization, Accept, Accept-Encoding, X-Login-Origin, responseType X -RateLimit-Limit →60 X-RateLimit-Remaining →59
您使用的是虚拟主机吗？还是一个域？

标签： angular laravel cors

【解决方案1】：

由于您是 Angular 新手，我建议您寻求解决方案来设置代理配置。使用 angular-cli 绕过代理。这样一来，与 API server 对话的就是 Angular CLI server。

在项目文件夹中创建代理配置文件：proxy.config.json，内容如下。

{
 "/api/*": {
    "target": "http://skewcommerce.test/api",
    "secure": false,
    "pathRewrite": {"^/api" : ""}
  }
}

现在您可以使用以下命令为您的应用提供服务：

ng serve  —-proxy-config proxy.conf.json

请注意，您的请求必须转到“localhost:4200/app/{resource name}”。例如，像这样：

this.httpClient.get('api/data/users'));

【讨论】：

【解决方案2】：

确保在您的虚拟主机配置中设置了标头。

虚拟主机应该这样配置。

<VirtualHost *:80>

  # CORS
    Header always set Access-Control-Allow-Origin "*"
    Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
    Header always set Access-Control-Allow-Credentials "true"
    Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"
    Header always set Access-Control-Max-Age "1000"

    # Added a rewrite to respond with a 200 SUCCESS on every OPTIONS request.
    RewriteEngine On
    RewriteCond %{REQUEST_METHOD} OPTIONS
    RewriteRule ^(.*)$ $1 [R=200,L]

    ServerName skewcommerce.test

    DocumentRoot /Your/Dir/To/The/Site
    <Directory  "/Your/Dir/To/The/Site">
        Options +Indexes +FollowSymLinks +MultiViews
        AllowOverride All
        Require local
    </Directory>
</VirtualHost>

如果你这样做，你可能需要删除 Laravel 端的'Access-Control-Allow-Origin': '*'。

希望对你有帮助。

【讨论】：