我如何解决 CORS 问题

Question

你好我已经尝试搜索一天如何解决这个问题我已经搜索了谷歌和 axios 和 youtube 但我仍然无法解决问题 这是我尝试使用 axios.post 进行调用时控制台上的错误

Access to XMLHttpRequest at 'http://localhost/artes-backend/test3.php' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response. 

AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}
code
: 
"ERR_NETWORK"
config
: 
{transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}
message
: 
"Network Error"
name
: 
"AxiosError"
request
: 
XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
stack
: 
"AxiosError: Network Error\n    at XMLHttpRequest.handleError (http://localhost:3000/static/js/bundle.js:71536:14)"
[[Prototype]]
: 
Error

我做什么：

1. 尝试在我的 package.json 上放置代理：（我的 php 位置）（http://localhost/）并在我放置的 axios 帖子中（prova/test3.php）

  handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    const { username, password } = this.state;

    axios.post('prova/test3.php', { username, password })
      .then(response => {
        console.log(response.data);
        // handle successful login
      })
      
      .catch(error => {
        console.error(error);
        this.setState({ error: 'Invalid username or password' });
      });
  };

2. 尝试在 php 项目文件夹中创建一个 htacess 文件：

RewriteEngine On

Handle Front Controller...
RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ test3.php [L]

3. 尝试 php 文件：

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET,POST,PUT,OPTIONS");
header("Access-Control-Allow-Headers:*");

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $username = $_POST['username'];
  $password = $_POST['password'];
...... some code 
?>

Answer 1

错误信息：

从源“http://localhost:3000”访问位于“http://localhost/artes-backend/test3.php”的 XMLHttpRequest 已被 CORS 策略阻止：请求标头字段 access-control-allow-origin 不是预检响应中的 Access-Control-Allow-Headers 允许。

建议您的 Javascript（axios 调用）包含一个

access-control-allow-origin

标头字段，这是服务器响应

Access-Control-Allow-Headers

在预检请求中不允许的。

A 飞行前请求 是在发送实际请求之前向服务器发出的浏览器请求。在您的情况下，这是在发出 POST 请求之前的 OPTIONS 请求。

飞行前的请求大概是这样的：

OPTIONS /artes-backend/test3.php
Access-Control-Request-Method: POST
Access-Control-Request-Headers: origin, x-requested-with
Origin: http://localhost:3000

它询问您的服务器是否接受来源、方法或请求标头字段。

响应此请求：

需要

1. header("Access-Control-Allow-Origin: *");

   或

   header("Access-Control-Allow-Origin: http://localhost:3000");

   。否则会有 CORS 问题。

2. header("Access-Control-Allow-Headers: *");

   可能是个好主意。

3. header("Access-Control-Allow-Methods: GET,POST,PUT,OPTIONS");

   可能不需要，但可能是个好主意。

默认的 Apache / Nginx 设置可能存在其他问题。您需要检查浏览器控制台以查看飞行前请求的实际请求和响应标头，以查看实际发生的情况。