你好，我已经尝试搜索了一天，现在就如何解决这个问题，我已经搜索了谷歌和axios和youtube，但我仍然无法解决这个问题，这是我的控制台上的错误，当我尝试拨打电话与axios.postAccess to XMLHttpRequest at 'http://localhost/prova/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' });
});
};1.尝试在php项目文件夹中创建一个htacess文件，如下所示：
RewriteEngine On
Handle Front Controller...
RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ test3.php [L]1.试试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
?>
1条答案
按热度按时间g6ll5ycj1#
错误消息：
CORS策略已阻止从源“http：//localhost：3000”访问位于“http：//localhost/artes-backend/test3.php”的XMLHttpRequest：预检响应中的Access-Control-Allow-Headers不允许请求头字段Access-Control-allow-origin。
建议您的Javascript（axios调用）包含
access-control-allow-origin头字段，这是preflight请求中的服务器响应Access-Control-Allow-Headers所不允许的。pre-flight request是在实际请求发送之前发出的浏览器到服务器的请求。在您的情况下，它是POST请求之前的OPTIONS请求。
飞行前请求可能是这样的：
它会询问您的服务器是否接受源、方法或请求头字段。
针对这一请求：
1.需要
header("Access-Control-Allow-Origin: *");或header("Access-Control-Allow-Origin: http://localhost:3000");。否则会出现CORS问题。header("Access-Control-Allow-Headers: *");可能是个好主意。header("Access-Control-Allow-Methods: GET,POST,PUT,OPTIONS");可能不需要，但可能是个好主意。默认的Apache / Nginx设置可能会有其他问题。您需要检查浏览器控制台以查看预处理请求的实际请求和响应头，从而了解实际发生了什么。