如何解决问题 Axios :已被 CORS 策略阻止: [英] how to fix the problem Axios : has been blocked by CORS policy:

问题描述

我已经针对我的问题进行了多次搜索，但我无法找到准确的方法.

当我尝试使用我的函数时，我使用 axios 和方法帖子，但它不起作用我在前端使用 react，后端使用 php

这是我的错误代码

 已被 CORS 策略阻止:对预检请求的响应未通过访问控制检查:它没有 HTTP ok 状态.

我的代码php:

 header("Access-Control-Allow-Origin: *");标头(内容类型:应用程序/json；字符集=UTF-8")；标头(访问控制允许方法:POST")；标头(访问控制最大年龄:3600")；标头(访问控制允许标头:内容类型，访问控制允许标头，授权，X-Requested-With")；包括('../../config/Database.php');包括('../../models/Post.php');if($_SERVER['REQUEST_METHOD'] == 'POST') {$database = new Database();$db = $database->connect();$post = new Post($db);$data = json_decode(file_get_contents("php://input"));$post->title = $data->title;$post->user_id = $data->user_id;$post->categorie_id = $data->categorie_id;$post->body = $data->body;$post->author = $data->author;if(!empty($post->title) && !empty($post->user_id) && !empty($post->categorie_id) && !empty($post->body) && !empty($post->author)) {if($post->create_post()) {http_response_code(200);echo json_encode(["message" => "Post is created"]);}别的 {http_response_code(405);echo json_encode(["message" => "Post is not created"]);}}别的 {echo "pas ok";}}别的 {http_response_code(405);echo json_encode(["message" =>"此方法未授权"]);}

我的代码反应:

axios.post('http://localhost/web/api/post/write.php', {标题":创建帖子"，user_id":5"，categorie_id":1"，正文":创建帖子"，作者":作者"}).then(功能(响应){控制台日志(响应)；}).catch(函数(错误){控制台日志(错误)；});

解决方案

您可以运行 Chrome 禁用网络安全(仅限本地测试)

OSX

在您的终端上:

open -n -a/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir=/tmp/chrome_dev_test"--disable-web-security

窗口

您可以创建一个单独的快捷方式，使其永远不会用于正常浏览，仅用于本地调试.

按照以下步骤操作:

1. 右键单击桌面，添加新的快捷方式
2. 将目标添加为 "[PATH_TO_CHROME]\chrome.exe"--disable-web-security --disable-gpu --user-data-dir=~/chromeTemp
3. 点击确定.

<块引用>

注意:在 Windows 10 上命令将是:C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"--disable-web-security --disable-gpu --user-data-dir=~/chromeTemp

I have already done several searches concerning my problem but I cannot find precisely how to do it.

I use axios and a method post when I try to use my function it does not work I use react in front and php in back end

Here is my error code

has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

my code php :

   header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
header("Access-Control-Allow-Methods: POST");
header("Access-Control-Max-Age: 3600");
header("Access-Control-Allow-Headers: Content-Type, Acces-Control-Allow-Headers, Authorization, X-Requested-With");

include('../../config/Database.php');
include('../../models/Post.php');

if($_SERVER['REQUEST_METHOD'] == 'POST') {
    $database = new Database();
    $db = $database->connect();

    $post = new Post($db);

    $data = json_decode(file_get_contents("php://input"));

    $post->title = $data->title;
    $post->user_id = $data->user_id;
    $post->categorie_id = $data->categorie_id;
    $post->body = $data->body;
    $post->author = $data->author;

    if(!empty($post->title) && !empty($post->user_id) && !empty($post->categorie_id)  && !empty($post->body) && !empty($post->author)) {
       if($post->create_post()) {
           http_response_code(200);
           echo json_encode(["message" => "Post is created"]);
       }else {
        http_response_code(405);
        echo json_encode(["message" => "Post is not created"]);
       }
    }else {
        echo "pas ok";
    }

}else {
    http_response_code(405);
    echo json_encode(["message" => "This method is not authorized"]);
}

My code react :

axios.post('http://localhost/web/api/post/write.php', {
      "title": "create post",
      "user_id": "5",
      "categorie_id": "1",
      "body": "create post",
      "author": "author"
  })
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });

解决方案

You can run Chrome disabling Web Security (local testing only)

OSX

On your terminal:



open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security

Windows

You can create a separate shortcut so that it never is used for normal browsing, only for debugging locally.

Follow next steps:

1. Right click on desktop, add new shortcut
2. Add the target as "[PATH_TO_CHROME]\chrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp
3. Click OK.

NOTE: On Windows 10 command will be: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp

这篇关于如何解决问题 Axios :已被 CORS 策略阻止:的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！