Question

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

我使用网址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无法加载https://login.live.com/oauth20_token.srf。对预检请求的响应没有通过访问控制检查：否＆＃39;访问控制 - 允许 - 来源＆＃39;标头出现在请求的资源上。起源＆＃39; http://localhost:4200＆＃39;因此不允许访问。

Answer 1

这实际上看起来不像是与恩伯相关的问题。您遇到的问题仅限于后端。对于ajax工作后端请求，应该在响应中提供正确的'Access-Control-Allow-Origin'标头。否则，您的浏览器将不接受此类响应并抛出您看到的错误。这与Ember无关，它与浏览器的工作方式有关。

现在要修复此问题，您必须将适当的客户端服务器名称添加到后端'Access-Control-Allow-Origin'标头中。即如果您打算从https://example.com提供您的Ember应用程序，那么您需要添加到'Access-Control-Allow-Origin'标题。

因此，我们假设您只想绕过这些消息。

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

示例快递应用： 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');
});

Ajax - ＆＃34; Access-Control-Allow-Origin＆＃34; ember.js中的错误

1 个答案: