CORS问题随着前飞行的响应

发布于 2025-02-10 22:10:38 字数 1350 浏览 1 评论 0原文

我正在做一个Axios的电话,以获取博客文章,但是我面临CORS问题。我尝试了一切,但我不明白这个问题。这是我的代码:

 axios({
    method: "POST",
    url: process.env.REACT_APP_API_URL + '/pages/articles',
    headers: { 'Content-Type': 'application/json;charset=UTF-8', "Access-Control-Allow-Origin": "*", "Accept": "application/json" },
    data: {
    country: localStorage.getItem("locale")
 }
 }).then(result => {
    setPosts(result.data.json.articles);
 });

在我的 /config/bootstrap.php中,

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization');
header("Access-Control-Allow-Credentials: true");
header('Content-Type: application/json');
$method = $_SERVER['REQUEST_METHOD'];
if ($method == "OPTIONS") {
    header('Access-Control-Allow-Origin: *');
    header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method,Access-Control-Request-Headers, Authorization");
    header("HTTP/1.1 200 OK");
    die();
}

控制台中的问题是:

Access to XMLHttpRequest at 'https://api.mysite.fr/pages/articles' from 
origin 'https://mysite.fr' has been blocked by CORS policy: Response to 
preflight request doesn't pass access control check: It does not have 
HTTP ok status.

I'm doing an axios call to get the blog articles, however I'm facing a CORS issue. I tried everything and I don't understand the problem. Here's my code:

 axios({
    method: "POST",
    url: process.env.REACT_APP_API_URL + '/pages/articles',
    headers: { 'Content-Type': 'application/json;charset=UTF-8', "Access-Control-Allow-Origin": "*", "Accept": "application/json" },
    data: {
    country: localStorage.getItem("locale")
 }
 }).then(result => {
    setPosts(result.data.json.articles);
 });

In my /config/bootstrap.php

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization');
header("Access-Control-Allow-Credentials: true");
header('Content-Type: application/json');
$method = $_SERVER['REQUEST_METHOD'];
if ($method == "OPTIONS") {
    header('Access-Control-Allow-Origin: *');
    header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method,Access-Control-Request-Headers, Authorization");
    header("HTTP/1.1 200 OK");
    die();
}

The problem in the console is:

Access to XMLHttpRequest at 'https://api.mysite.fr/pages/articles' from 
origin 'https://mysite.fr' has been blocked by CORS policy: Response to 
preflight request doesn't pass access control check: It does not have 
HTTP ok status.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

看春风乍起 2025-02-17 22:10:39

在示例中,请在服务器上应用CORS验证,而不是前端:
JavaScript中的请求
这向您展示了如何在JavaScript中提出本政策允许的请求。

var http_request;
http_request = new XMLHTTPRequest();
http_request.onreadystatechange = function () { /* .. */ };
http_request.open("POST", "process.env.REACT_APP_API_URL + '/pages/articles'");
http_request.withCredentials = true;
http_request.setRequestHeader("Content-Type", "application/json");
http_request.send({ 'request': "authentication token" });

我们正在发送包含JSON的帖子请求,我们将包括我们的cookie。它与这些标头产生了请求:

Origin: https://mysite.fr
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type

用于PHP项目

// Allow from any origin
    if (isset($_SERVER['HTTP_ORIGIN'])) {
        // Decide if the origin in $_SERVER['HTTP_ORIGIN'] is one
        // you want to allow, and if so:
        header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
        header('Access-Control-Allow-Credentials: true');
        header('Access-Control-Max-Age: 86400');    // cache for 1 day
    }

    // Access-Control headers are received during OPTIONS requests
    if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {

        if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
            // may also be using PUT, PATCH, HEAD etc
            header("Access-Control-Allow-Methods: GET, POST, OPTIONS");         

        if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
            header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");

        exit(0);
    }

Please apply CORS validation on the server it needs to be server-side not front-end for the example:
The request in JavaScript
This shows you how to make a request in JavaScript that is allowed by this policy.

var http_request;
http_request = new XMLHTTPRequest();
http_request.onreadystatechange = function () { /* .. */ };
http_request.open("POST", "process.env.REACT_APP_API_URL + '/pages/articles'");
http_request.withCredentials = true;
http_request.setRequestHeader("Content-Type", "application/json");
http_request.send({ 'request': "authentication token" });

We're sending a POST request that contains JSON and we'll include our cookies. It produces a request with these headers:

Origin: https://mysite.fr
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type

For PHP Project

// Allow from any origin
    if (isset($_SERVER['HTTP_ORIGIN'])) {
        // Decide if the origin in $_SERVER['HTTP_ORIGIN'] is one
        // you want to allow, and if so:
        header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
        header('Access-Control-Allow-Credentials: true');
        header('Access-Control-Max-Age: 86400');    // cache for 1 day
    }

    // Access-Control headers are received during OPTIONS requests
    if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {

        if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
            // may also be using PUT, PATCH, HEAD etc
            header("Access-Control-Allow-Methods: GET, POST, OPTIONS");         

        if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
            header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");

        exit(0);
    }
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文