首頁猿問沒有“訪問-控制-允許...

沒有“訪問-控制-允許-原產(chǎn)地”-節(jié)點(diǎn)/Apache端口問題

AngularJS Node.js

叮當(dāng)貓咪 2019-06-21 17:07:29

沒有“訪問-控制-允許-原產(chǎn)地”-節(jié)點(diǎn)/Apache端口問題我使用Node/Express創(chuàng)建了一個(gè)小API，并試圖使用Angularjs來提取數(shù)據(jù)，但是當(dāng)我的html頁面在localhost上Apache下運(yùn)行時(shí)：8888，節(jié)點(diǎn)API在端口3000上偵聽，我得到的是No‘Access-Control-ALL-原產(chǎn)地’。我嘗試使用節(jié)點(diǎn)-http-代理和VhostApache，但沒有多少成功，請參閱下面的完整錯(cuò)誤和代碼。“XMLHttpRequest無法加載localhost：3000。請求的資源上不存在”訪問-控制-允許-原產(chǎn)地“標(biāo)頭。因此，不允許訪問源‘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 code angular.module('contractorsApp', []) .controller('ContractorsCtrl', function($scope, $http,$routeParams) { $http.get('localhost:3000').success(function(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>

查看完整描述

3 回答

慕蓋茨4494581

TA貢獻(xiàn)1850條經(jīng)驗(yàn) 獲得超11個(gè)贊

嘗試將以下中間件添加到NodeJS/Express應(yīng)用程序中(為了方便起見，我添加了一些注釋)：

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

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

    // 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();});

希望能幫上忙！

反對回復(fù) 2019-06-21

湖上湖

TA貢獻(xiàn)2003條經(jīng)驗(yàn) 獲得超2個(gè)贊

接受答案是好的，如果你喜歡更短的東西，你可以使用一個(gè)插件CORS可供Express.js使用

對于這種特殊情況，使用起來很簡單：

var cors = require('cors');// use it before all route definitionsapp.use(cors({origin: 'http://localhost:8888'}));

反對回復(fù) 2019-06-21

哆啦的時(shí)光機(jī)

TA貢獻(xiàn)1779條經(jīng)驗(yàn) 獲得超6個(gè)贊

另一種方法是簡單地將頭添加到路由中：

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

反對回復(fù) 2019-06-21