否“Access-Control-Allow-Origin”-节点/ Apache端口问题

我已经使用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>

当前回答

你可以用cors包来处理。

var cors = require('cors')
var app = express()

app.use(cors())

用于设置具体的原点

app.use(cors({origin: 'http://localhost:8080'}));

知道更多

2021-08-08 05:02:37

其他回答

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

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

2016-11-26 16:14:06

应答码只允许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();
});

2016-07-06 17:31:24

当前端和后端运行在不同的端口上时，就会发生这种情况。由于CORS标头的缺失，浏览器会阻止来自后端的响应。解决方案是在后端请求中添加CORS标头。最简单的方法是使用cors的npm包。

var express = require('express')
var cors = require('cors')
var app = express()
app.use(cors())

这将在所有请求中启用CORS报头。有关更多信息，您可以参考cors文档

https://www.npmjs.com/package/cors

2019-08-18 14:01:06

我们将看看前两个答案是否接受我的编辑，但很可能您必须添加或使用127.0.0.1而不是localhost。

使用cors包，你甚至可以使用多个允许的来源:

app.use(
  cors({ origin: ["http://localhost:8888", "http://127.0.0.1:8888"] })
);

如果您希望允许任何内容，则可以使用origin:“*”。

要了解更多信息，请查看Web Dev Simplified的教程。

2022-09-13 13:42:13

你可以使用"$http.jsonp"

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

你需要使用以下命令打开你的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

2013-08-19 09:30:31

否“Access-Control-Allow-Origin”-节点/ Apache端口问题

推荐文章

最新文章

标签