javascript - Ajax - ember.js 中的 "Access-Control-Allow-Origin"错误

Question

我想知道你对 ajax 中这个简单代码的问题的看法，它有问题 Access-Control-Allow-Origin，已经尝试了几种方法来定义 ember "Access-Control-Allow-Origin": "* " 但没有成功，所以我想知道是否有同样问题的人找到了解决方案。

我使用 url 地址 localhost: 4200 并且已经尝试使用 firebase 的子域在这两种情况下错误总是相同的。

ajax请求:

import Ember from 'ember';
import { isAjaxError, isNotFoundError, isForbiddenError } from 'ember-ajax/errors';

export default Ember.Controller.extend({
    ajax: Ember.inject.service(),
    actions: {

        code() {

            var cliente = '***';
            var redirectUri = 'http://localhost:4200/teste';
            var client_secret = '***';
            var code = '***';
            var grant_type = 'authorization_code';
            var data =
                    "client_id=" + cliente +
                    "&redirect_uri=" + encodeURIComponent(redirectUri) +
                    "&client_secret=" + client_secret +
                    "&code=" + code +
                    "&grant_type=" + grant_type;

            this.send('post', data)

        },

        post(data) {

            this.get('ajax').post("https://login.live.com/oauth20_token.srf", {
                method: 'POST',
                headers: {
                    "Access-Control-Allow-Origin": "*",
                    "Content-Type": "application/x-www-form-urlencoded",
                },
                data: data,
                dataType: 'JSON',

            });
        },
    }});

我的内容安全政策:

contentSecurityPolicy: {
    'connect-src': "'self' http://localhost:4200 https://*.googleapis.com https://login.live.com/oauth20_token.srf",
    'child-src': "'self' http://localhost:4200",
    'script-src': "'self' 'unsafe-eval' https://login.live.com",
    'img-src': "'self' https://*.bp.blogspot.com https://cdn2.iconfinder.com http://materializecss.com https://upload.wikimedia.org https://www.gstatic.com",
    'style-src': "'self' 'unsafe-inline' ",
},

错误是:

XMLHttpRequest cannot load https://login.live.com/oauth20_token.srf. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

Answer 1

这实际上看起来不像是与 Ember 相关的问题。您遇到的问题完全与后端相关。对于后端工作的 ajax 请求，应提供正确的 'Access-Control-Allow-Origin' header 作为响应。否则您的浏览器将不会接受此类响应并抛出您所看到的错误。它与 Ember 没有任何关系，它只是浏览器的工作方式。

现在要解决此问题，您必须将正确的客户端服务器名称添加到后端 'Access-Control-Allow-Origin' header 中。 IE。如果您要从 https://example.com 提供您的 Ember 应用程序，那么您需要将其添加到 'Access-Control-Allow-Origin' header 中。

因此，假设您只是想要绕过此消息的方法。

1. 有很多浏览器扩展会在您的浏览器中禁用 CORS 检查以进行开发。如果您正在使用 localhost 但计划在将来移动到真实服务器并且有办法实际设置 'Access-Control-Allow-Origin' 后端 header 。
2. 假设您现在没有任何方法可以更改后端 header ，但非常想测试客户端应用程序如何在您的远程 https://example.com 上运行。您必须设置一个远程服务器来代理您对目标后端的所有请求，修改响应中发送的 header ，以便您的浏览器接受它们。这样您就不必使用任何 chrome 扩展来禁用 CORS。设置此类服务器的最简单方法之一是使用以下包 - https://www.npmjs.com/package/express-http-proxy .您的案例的配置将非常简单。

express 应用示例: var proxy = require('express-http-proxy'); var app = require('express')();

app.use('/', proxy('www.example.com', {
    intercept: function (rsp, data, req, res, callback) {
        res.append('Access-Control-Allow-Origin', '*');
        callback(null, data);
    }}));

app.listen(3000, function () {
    console.log('listening on port 3000');
});