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');
});