XMLHttpRequest已被www.example.com上的CORS策略阻止axios.post

wfypjpf4  于 2022-11-05  发布在  iOS
关注(0)|答案(5)|浏览(199)

axios.post(下面的代码)必须将数据发送到url api/add-todo,但我得到了以下错误:

axios.post('http://localhost/vueoctober/todo/api/add-todo', todo).then(function (response) {
    console.log(response);
  }).catch(function(error) {
    console.log(error);
  });

路径api/add-todo是用十月方法Route::get()https://octobercms.com/docs/services/router)处理的,为什么找不到?
如果我将axios.post更改为axios.get,它将工作!但我需要后数据,而不是获取。

我尝试的是:

1)我尝试将这些头文件添加到.htaccess:

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTION"

它只对axios.get起作用。axios.post仍然阻塞。
2)我在httpd. conf中添加了Header set Access-Control-Allow-Origin "*"
Vue应用程序在端口8080上提供服务,因此axios.post URL不能是相对

vs3odd8k

vs3odd8k1#

我在FF上也遇到过这样的问题,尽管我在.htaccess中有这样的内容:
Header set Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS" .
经过更多的搜索,我找到了一个由@marcomessa的Gist,解决了我的问题。
https://gist.github.com/marcomessa/54d077a0208439f5340126ff629a3718

ncgqoxb0

ncgqoxb02#

请仔细查看错误消息,它指出预检请求的响应没有HTTP ok状态。
显然,服务器端代码没有OPTIONS请求的路由处理程序,因此需要添加一个。
顺便说一句,在浏览器获得一个成功的OPTIONS响应后,它将发出POST请求,但您说:
路由api/add-todo是用October方法Route::get()处理的
您将需要使用Route::post()来处理此问题。

xzlaal3s

xzlaal3s3#

为了澄清这一点,总是有很多方法来回答一个问题。下面是我对我的问题所做的。Check this for Preflight Request。预检请求是由浏览器创建的,并不是为了安全。我首先创建的这个函数将在请求时抛出一个ok消息,那么如果数据包含任何数据,它将执行所谓的操作(这是你检查安全性的地方)。我不需要弄乱.htaccess文件。虽然我确实安装了CORS插件,因为它是一个很好的插件。还有来自watch-了解作者是做一个跨源请求,他在如何纠正问题。我认为他只是拍摄的视频之前,预检请求开始成为一个浏览器的规范。找到路由信息在这里。

Route::match(['POST', 'OPTIONS'],'api/update-todo', function(Request $req) {
$data = $req->input();
if (!empty($data)) {
    Todo::where('id', $data['id'])
        ->update([
        'name' => $data['name'],
        'description' => $data['description'],
        'status' => $data['status'] 
    ]);
    return response()->json([
        'Success' => $data,
    ]);
} else {
    return response()->json([
      'Success' => $req,
    ]);
}
});
xkrw2x1b

xkrw2x1b4#

我不能通过axios解决它,我浪费了很多时间,但我很容易通过这种方式解决它。
假设我们正在发布:

{name:"Cynthia Merk", age:"22"}

我执行了下一个函数来发送最后一个JSON(任何JSON结构都适用):

const PostFunction = (data, letFunction, errorHandle) => {
    let uri = "http://.../create.php";
    let xhr = new XMLHttpRequest();
    xhr.overrideMimeType("application/json");
    xhr.open("POST", uri, true);
    xhr.addEventListener("readystatechange", function() {
        if(xhr.readyState === 4 && xhr.status === 200) {
            letFunction(this.responseText);
        }else{
            errorHandle(this.responseText);
        }
    });
    xhr.send(JSON.stringify(data));
}

你可以调用这个函数,它需要改变“uri”变量的值,并且需要使用JSON.stringify来发送数据。
在PHP中,API对于傻瓜来说也非常简单:

<?php
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token, X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method");
    header("Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE");
    header("Allow: POST, GET, OPTIONS, PUT, DELETE");

    class DB extends PDO {
        private $host = 'localhost';
        private $dbname = 'zamuSysScheme';
        private $user = 'root';
        private $password = 'admin';
        private $charset = 'utf8';

        public function __construct(){
            try{
                $dns = 'mysql:host=' . $this->host . ';dbname=' . $this->dbname;

                parent::__construct($dns, $this->user, $this->password, array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));

            } catch(PDOException $e){
                echo 'Error: ' . $e->getMessage();
                exit;
            }
        }

    }

    $method = $_SERVER['REQUEST_METHOD'];

    $pdo = new DB();

    if($_SERVER['REQUEST_METHOD'] == 'POST'){
        $json = file_get_contents('php://input');
        $decoded = json_decode($json, true);

        try{

            $Name = $decoded["name"];
            $Age = $decoded["age"];
            if(!isset($Name)){
                header("HTTP/1.1 402 FAIL");
                echo "The paramenter Name is not present";
                exit;               
            }
            if(!isset($Age)){
                header("HTTP/1.1 403 FAIL");
                echo "The paramenter Age is not present";
                exit;               
            }

            $sqlStatement = "INSERT INTO Client (Name, Age) VALUES";
            $sqlStatement .= "(:Name, :Age)";
            $stmt = $pdo->prepare($sqlStatement);
            $stmt->bindValue(':Name', $Name, PDO::PARAM_INT);
            $stmt->bindValue(':Age', $Age, PDO::PARAM_INT);
            $stmt->execute();
            $Client_Id = $pdo->lastInsertId();

            if($Client_Id){
                header("HTTP/1.1 200 OK");
                echo $Pago_Id;
                exit;
            }

        }catch(Exception $except){
            header("HTTP/1.1 400 FAIL");
            echo "Error: " . $json . " /// " . $except;
            exit;
        }

    }
    header("HTTP/1.1 401 BAD REQUEST");

?>

我希望它能帮助你,任何问题都是允许的,如果我有答案,我会很高兴地帮助。

相关问题