XMLHttpRequest 无法加载对预检请求的响应未通过访问控制检查答案

【问题标题】：XMLHttpRequest cannot load Response to preflight request doesn't pass access control checkXMLHttpRequest 无法加载对预检请求的响应未通过访问控制检查
【发布时间】：2016-01-26 05:21:01
【问题描述】：

在我的 Angular 应用程序中，当我在本地开发 (Chrome) 时尝试登录时出现错误：

XMLHttpRequest cannot load https://www.tickertags.com/app/api/login. 
Response to preflight request doesn't pass access control check: 
The 'Access-Control-Allow-Origin' header has a value 'http://localhost:8100'
that is not equal to the supplied origin.
Origin 'http://localhost' is therefore not allowed access.

我的 loginController 中的登录功能

function login(credentials) {
    console.log('credentials',credentials);
    AuthFactory.login(credentials).then(function (user) {
        $rootScope.$broadcast(AUTH_EVENTS.loginSuccess);
        $scope.setCurrentUser(user);

        if (user.password_reset) {
            $location.path('/password');
        } else {
            $location.path('/tickers');
        }
    }, function () {
        console.log('"Invalid Username/Password"');
        $scope.loginData.message = "Invalid Username/Password";
        $rootScope.$broadcast(AUTH_EVENTS.loginFailed);
    }, function () {
        console.log('"Invalid Username/Password"');
        $scope.loginData.message = "Invalid Username/Password";
        $rootScope.$broadcast(AUTH_EVENTS.loginFailed);
    });
}

AuthFactory.login 函数命中了在生产环境中托管的 API。我不确定我错过了什么？这就是我的本地主机链接的样子 http://localhost/static/manage/v2/#/login

【问题讨论】：

查看本页右侧的所有相关问题。他们每个人都是同一个主题。问题每天在这里出现无数次，并不难研究
是的，到目前为止，我已经经历了大约 5 个，我觉得没有一个回答我的问题 :( 我看到还有更多，现在正在经历它们
您与我们共享的代码都没有设置原始标头，因此我们无法判断为什么它将 Access-Control-Allow-Origin 设置为 http://localhost:8100 而不是 http://localhost
重要的是要注意在大多数浏览器中不同的端口被认为是不同的来源
不同的端口在所有浏览器中被认为是不同的来源。这就是规范所说的。它不被视为不同的域，因为它不是一个域。

标签： javascript angularjs xmlhttprequest

【解决方案1】：

希望这可以帮助遇到此问题且无法访问服务器端任何内容的其他人。

我发现了我的问题，我试图通过我的 API 调用来访问一个绝对路径来登录，即：www.tickertags.com/api/... 而不仅仅是修复它的/api/...。

【讨论】：

【解决方案2】：

要超越CORS问题，你必须同时配置前端和后端。

对于前端，当你在初始化时调用myApp.run()方法你可以配置默认的HTTP头：

$http.defaults.useXDomain = true;
delete $http.defaults.headers.common['X-Requested-With'];

对于后端部分，您需要修改请求标头。我不知道你的后端有什么，但我通常在我的本地节点服务器上使用它们。

app.use(function (req, res, next) {
    res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
    res.header('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
 });

【讨论】：