无法从本地访问远程PHP认证接口的CORS问题求助

我在本地环境（http://127.0.0.1:5500）尝试访问远程服务器上的PHP验证接口（http://cop4331-5.com/LAMPAPI/Login.php）时，遇到了CORS策略阻止的错误：

index.html:1 从源'http://127.0.0.1:5500'访问XMLHttpRequest到'http://cop4331-5.com/LAMPAPI/Login.php'已被CORS策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在'Access-Control-Allow-Origin'头。

我考虑通过搭建CORS代理来curl该端点，但不确定这个方案是否可行。我的前端JavaScript代码如下：

const urlBase = 'http://COP4331-5.com/LAMPAPI';
const extension = 'php';

let userId = 0;
let firstName = "";
let lastName = "";

function doLogin()
{
    userId = 0;
    firstName = "";
    lastName = "";
    
    let login = document.getElementById("loginName").value;
    let password = document.getElementById("loginPassword").value;
//  var hash = md5( password );
    
    document.getElementById("loginResult").innerHTML = "";

    let tmp = {login:login,password:password};
//  var tmp = {login:login,password:hash};
    let jsonPayload = JSON.stringify( tmp );
    
    let url = urlBase + '/Login.' + extension;

    let xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-type", "application/json; charset=UTF-8");
    try
    {
        xhr.onreadystatechange = function() 
        {
            if (this.readyState == 4 && this.status == 200) 
            {
                let jsonObject = JSON.parse( xhr.responseText );
                userId = jsonObject.id;
        
                if( userId < 1 )
                {       
                    document.getElementById("loginResult").innerHTML = "User/Password combination incorrect";
                    return;
                }
        
                firstName = jsonObject.firstName;
                lastName = jsonObject.lastName;

                saveCookie();
    
                window.location.href = "color.html";
            }
        };
        xhr.send(jsonPayload);
    }
    catch(err)
    {
        document.getElementById("loginResult").innerHTML = err.message;
    }

}

可行方案说明 #

搭建CORS代理完全可行，这是前端开发中解决跨域问题的常用临时方案之一。除此之外，还有更直接的后端配置方案，以下是具体选项：

方案1：在PHP接口中添加CORS响应头 #

这是最根本的解决方法，直接在Login.php的开头添加以下代码，允许本地域名跨域访问：

// 允许本地开发域名跨域
header("Access-Control-Allow-Origin: http://127.0.0.1:5500");
// 允许POST请求携带的Content-Type头
header("Access-Control-Allow-Headers: Content-Type");
// 允许POST请求方法
header("Access-Control-Allow-Methods: POST");
// 若需要携带Cookie，需添加此行（同时前端请求要设置withCredentials=true）
// header("Access-Control-Allow-Credentials: true");

如果是开发环境临时测试，也可以将Access-Control-Allow-Origin设为*，允许所有来源访问（生产环境不建议这么做）。

方案2：搭建本地CORS代理 #

代理服务器会转发你的请求到目标接口，同时自动添加CORS响应头，绕开浏览器的跨域限制。比如用Node.js快速搭建：

1. 安装依赖：

npm install express http-proxy-middleware

2. 创建代理文件proxy.js：

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();

// 代理请求到目标API
app.use('/api', createProxyMiddleware({
  target: 'http://cop4331-5.com/LAMPAPI',
  changeOrigin: true,
  pathRewrite: { '^/api': '' },
  // 给响应添加CORS头
  onProxyRes: (proxyRes) => {
    proxyRes.headers['Access-Control-Allow-Origin'] = 'http://127.0.0.1:5500';
  }
}));

app.listen(3000, () => {
  console.log('代理服务器运行在 http://127.0.0.1:3000');
});

3. 启动代理服务器，然后修改前端代码中的urlBase为http://127.0.0.1:3000/api即可。

方案3：临时关闭浏览器跨域检查（仅开发测试用） #

Chrome浏览器可以通过启动参数关闭跨域安全检查，打开命令行执行：

chrome.exe --disable-web-security --user-data-dir="C:/ChromeDevSession"

这种方式只适合本地快速测试，不能用于生产环境。

内容的提问来源于stack exchange，提问作者Nawfal Cherkaoui Elmalki