Question

我是新手，现在遇到了一些CORS问题。我尝试了所有可能的解决方案，包括设置CORS标头和服务器端更改。但仍然无法正常工作。

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

从原点“ http://skewcommerce.test/api/user/add/”到“ http://localhost:4200”的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});
   }
}

请帮助我知道我做错了什么。：（

Answer 1

由于您是新手，所以建议您使用解决方案来设置代理配置。使用angular-cli绕过代理。这样，与API服务器通信的就是Angular CLI服务器。

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

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

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

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

请注意，您的请求必须转到“ localhost：4200 / app / {资源名称}”。例如，像这样：

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

Answer 2

请确保在您的vhost配置上设置标头。

虚拟主机应该这样配置。

<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': '*'。

希望有帮助。

即使设置了CORS标头和服务器响应，Angular和laravel的CORS问题

2 个答案: