我已经使用Node/Express创建了一个小API,并试图使用Angularjs拉数据,但由于我的html页面在localhost:8888和节点API在端口3000上监听下运行,我得到了No 'Access-Control-Allow-Origin'。我尝试使用node-http-proxy和Vhosts Apache,但没有太多成功,请参阅下面的完整错误和代码。

XMLHttpRequest无法加载localhost:3000。被请求的资源上没有'Access-Control-Allow-Origin'标头。因此,不允许访问Origin 'localhost:8888'。”

// Api Using Node/Express    
var express = require('express');
var app = express();
var contractors = [
    {   
     "id": "1", 
        "name": "Joe Blogg",
        "Weeks": 3,
        "Photo": "1.png"
    }
];

app.use(express.bodyParser());

app.get('/', function(req, res) {
  res.json(contractors);
});
app.listen(process.env.PORT || 3000);
console.log('Server is running on Port 3000')

角码

angular.module('contractorsApp', [])
.controller('ContractorsCtrl', function($scope, $http,$routeParams) {

   $http.get('localhost:3000').then(function(response) {
       var data = response.data;
       $scope.contractors = data;
   })

HTML

<body ng-app="contractorsApp">
    <div ng-controller="ContractorsCtrl"> 
        <ul>
            <li ng-repeat="person in contractors">{{person.name}}</li>
        </ul>
    </div>
</body>

当前回答

你可以使用"$http.jsonp"

OR

下面是周围的工作铬为本地测试

你需要使用以下命令打开你的chrome浏览器。(按窗口+ R)

Chrome.exe --allow-file-access-from-files

注意:你的chrome浏览器不能打开。当你运行这个命令时,chrome浏览器会自动打开。

如果你在命令提示符中输入这个命令,然后选择你的chrome安装目录,然后使用这个命令。

下面是在MAC中使用“——allow-file-access-from-files”打开chrome的脚本代码

set chromePath to POSIX path of "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" 
set switch to " --allow-file-access-from-files"
do shell script (quoted form of chromePath) & switch & " > /dev/null 2>&1 &"

第二个选项

你可以使用open(1)来添加标志:open -a '谷歌Chrome'——args——allow-file-access-from-files

其他回答

这对我很管用。

app.get('/', function (req, res) {

    res.header("Access-Control-Allow-Origin", "*");
    res.send('hello world')
})

你可以根据自己的需要改变*。希望这能有所帮助。

另一种方法是简单地添加头到你的路由:

router.get('/', function(req, res) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); // If needed
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type'); // If needed
    res.setHeader('Access-Control-Allow-Credentials', true); // If needed

    res.send('cors problem fixed:)');
});

除了所有列出的答案外,我还犯了同样的错误

我可以访问前端和后端,我已经添加了cors模块app.use(cors());尽管如此,我还是在为这个错误而挣扎。

经过一些调试后,我发现了这个问题。当我上传一个大小超过1mb的媒体时,Nginx服务器抛出了错误

<html>

<head>
    <title>413 Request Entity Too Large</title>
</head>

<body>
    <center>
        <h1>413 Request Entity Too Large</h1>
    </center>
    <hr>
    <center>nginx/1.18.0</center>
</body>

</html>

但是在前台控制台,我发现了这个错误

Access to XMLHttpRequest at 'https://api.yourbackend.com' from origin 'https://web.yourfromntend.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这让人很困惑。但是这个错误的路由原因来自nginx配置。这只是因为指令client_max_body_size的值默认设置为0。它决定了允许的HTTP请求大小是client_max_body_size。这个指令可能已经在你的nginx.conf文件(位于/etc/nginx/nginx.conf)中定义了。现在你需要在http或服务器上添加/编辑client_max_body_size指令的值。

server {
    client_max_body_size 100M;
    ...
}

一旦你设置了你想要的值,保存你的更改并重新加载Nginx: service Nginx reload

经过这些改变,它运行得很好

参考:https://www.keycdn.com/support/413-request-entity-too-large: ~:文本= % 23日处理% 20 % 20 % 20的web服务器% 20。= % 20例% 20请求% 2 c % 20 % 5月20日,如% 20 % 20大% 20媒体% 20文件)。

应答码只允许localhost:8888。此代码不能部署到生产环境中,也不能部署到不同的服务器和端口名称中。

要让它适用于所有源,请使用下面的代码:

// Add headers
app.use(function (req, res, next) {

    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', '*');

    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);

    // Pass to next layer of middleware
    next();
});
app.all('*', function(req, res,next) {
    /**
     * Response settings
     * @type {Object}
     */
    var responseSettings = {
        "AccessControlAllowOrigin": req.headers.origin,
        "AccessControlAllowHeaders": "Content-Type,X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5,  Date, X-Api-Version, X-File-Name",
        "AccessControlAllowMethods": "POST, GET, PUT, DELETE, OPTIONS",
        "AccessControlAllowCredentials": true
    };

    /**
     * Headers
     */
    res.header("Access-Control-Allow-Credentials", responseSettings.AccessControlAllowCredentials);
    res.header("Access-Control-Allow-Origin",  responseSettings.AccessControlAllowOrigin);
    res.header("Access-Control-Allow-Headers", (req.headers['access-control-request-headers']) ? req.headers['access-control-request-headers'] : "x-requested-with");
    res.header("Access-Control-Allow-Methods", (req.headers['access-control-request-method']) ? req.headers['access-control-request-method'] : responseSettings.AccessControlAllowMethods);

    if ('OPTIONS' == req.method) {
        res.send(200);
    }
    else {
        next();
    }


});