Question

以下是我的代码：使用本地URL时，我收到错误

“无法加载http://localhost/reactjs/my-app/lib/ajax.php：对预检请求的响应未通过访问控制检查：请求的资源上没有”Access-Control-Allow-Origin“标头。因此，“http://localhost:3000”不允许访问“

但是当我使用“https://jsonplaceholder.typicode.com/todos”这样的实时网址时，它的工作正常。

$.ajax({
url: 'http://localhost/reactjs/lib/ajax.php',
//url: 'https://jsonplaceholder.typicode.com/todos',
 type: 'GET',
dataType: 'jsonp',
//contentType: "application/json; charset=utf-8",
//jsonp: "json_callback",
crossOrigin: true,
//cors: true,
//data: {user_name:username, user_type: usertype, password: password,mode: 'Login' },
success: function(data){
alert(data);
},
error: function(error){
console.log(error);
 }
});

Answer 1

在php端添加：

header('Access-Control-Allow-Origin: *');

header('Access-Control-Allow-Methods: GET, POST');

header("Access-Control-Allow-Headers: X-Requested-With");

此网址http://localhost/reactjs/my-app/lib/ajax.php应为http://localhost/reactjs/lib/ajax.php

Answer 2

您正在呼叫不同的主机，这就是您遇到CORS问题的原因。您的应用程序正在localhost:3000上运行，并且您正在localhost上调用您的服务。

您可以执行Vivek建议的操作（如果它是不同的主机），或者您只需要引用正确的端口（如果两个应用程序都在localhost：3000上）。

请注意，您不必在ajax中写入绝对URL。相反，如果它位于同一主机上，您只需编写/reactjs/lib/ajax.php。

如何在localhost上的reactjs中使用ajax

2 个答案: