'액세스 제어-허용-오리진' 없음 - 노드/Apache 포트 문제
Node/Express API의 Angularjs, html의 localhost:8888 apache는 API의 3000 learn-Control no-Access입니다.는 는는그용사 i를 사용해 보았다.node-http-proxyVhosts Apache s Vhosts Apache 。아래의 완전한 에러와 코드를 참조해 주세요.
XMLHttpRequest는 localhost:3000을 로드할 수 없습니다.요청된 리소스에 'Access-Control-Allow-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>
NodeJS/Express 앱에 다음 미들웨어를 추가해 보십시오(고객님의 편의를 위해 코멘트를 추가했습니다).
// Add headers before the routes are defined
app.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();
});
해야 할 .127.0.0.1localhost
접수된 답변은 괜찮습니다.짧은 것을 원하시면 Express.js에서 사용할 수 있는 cors라는 플러그인을 사용하셔도 됩니다.
이 경우에는 사용이 간단합니다.
var cors = require('cors');
// use it before all route definitions
app.use(cors({origin: 'http://localhost:8888'}));
해야 할 .127.0.0.1localhost
요청 발신지는 허용된 발신지와 일치해야 하며, 여러 발신지를 가질 수도 있습니다.
app.use(
cors({origin: ['http://localhost:8888', 'http://127.0.0.1:8888']})
);
다른 방법으로는 단순히 루트에 헤더를 추가합니다.
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:)');
});
두 개 이상의 도메인을 화이트리스트로 만들어야 한다는 점을 제외하고는 상위 답변은 잘 작동했습니다.
상위 은 ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, OPTIONS요청은 미들웨어에 의해 처리되지 않으며 자동으로 처리되지 않습니다.
은 as화음음음음음음음음음음음 whitel whitel whitel whitel whitel whitel로 저장합니다.allowed_origins Configuration에 합니다.origin이 '''이래'''Header 。Access-Control-Allow-Origin에서는 도메인을 여러 개 지정할 수 없습니다.
결론은 다음과 같습니다.
var _ = require('underscore');
function allowCrossDomain(req, res, next) {
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
var origin = req.headers.origin;
if (_.contains(app.get('allowed_origins'), origin)) {
res.setHeader('Access-Control-Allow-Origin', origin);
}
if (req.method === 'OPTIONS') {
res.send(200);
} else {
next();
}
}
app.configure(function () {
app.use(express.logger());
app.use(express.bodyParser());
app.use(allowCrossDomain);
});
응답 코드는 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();
});
프로젝트에 Cors 의존 관계 설치:
npm i --save cors
서버 컨피규레이션파일에 다음을 추가합니다.
var cors = require('cors');
app.use(cors());
2.8.4 cors 버전에서는 사용할 수 있습니다.
안녕하세요, 이것은 프런트엔드와 백엔드가 다른 포트로 실행되고 있을 때 발생합니다.브라우저는 CORS 헤더에 존재하지 않기 때문에 백엔드로부터의 응답을 차단합니다.해결책은 백엔드 요구에 CORS 헤더를 추가하도록 하는 것입니다.가장 쉬운 방법은 corsnpm 패키지를 사용하는 것입니다.
var express = require('express')
var cors = require('cors')
var app = express()
app.use(cors())
그러면 모든 요청에서 CORS 헤더가 활성화됩니다.자세한 내용은 cors 문서를 참조하십시오.
https://www.npmjs.com/package/cors
이건 나한테 효과가 있었어.
app.get('/', function (req, res) {
res.header("Access-Control-Allow-Origin", "*");
res.send('hello world')
})
*를 필요에 맞게 변경할 수 있습니다.이게 도움이 되길 바라.
다른 답변은 모두 효과가 없었습니다.(cors 패키지, 미들웨어를 통한 헤더 설정 등)
socket.io 3^의 경우 추가 패키지 없이 작동했습니다.
const express = require('express');
const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server, {
cors: {
origin: "*",
methods: ["GET", "POST"]
}
});
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();
}
});
각도 6 또는 다른 프레임워크에서 "Access-Control-Allow-Origin" 오류를 방지하려면 NODEJ Restful api의 app.js에 다음 코드를 추가하십시오.
var express = require('express');
var app = express();
var cors = require('cors');
var bodyParser = require('body-parser');
//enables cors
app.use(cors({
'allowedHeaders': ['sessionId', 'Content-Type'],
'exposedHeaders': ['sessionId'],
'origin': '*',
'methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
'preflightContinue': false
}));
코르스 패키지로 처리하면 되겠네요.
var cors = require('cors')
var app = express()
app.use(cors())
특정 원점을 설정하기 위해
app.use(cors({origin: 'http://localhost:8080'}));
"$http"를 사용할 수 있습니다.jsonp"
또는
다음은 로컬 테스트용 크롬에 대한 해결 방법입니다.
다음 명령으로 크롬을 열어야 합니다. (윈도+R 누르기)
Chrome.exe --allow-file-access-from-files
참고: 크롬을 열지 마십시오.이 명령을 실행하면 크롬이 자동으로 열립니다.
명령 프롬프트에서 이 명령을 입력하는 경우 크롬 설치 디렉토리를 선택한 후 이 명령을 사용합니다.
아래 스크립트 코드는 "--allow-file-access-from-files"를 사용하여 MAC에서 크롬을 여는 것입니다.
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 'Google Chrome' --args --allow-file-access-from-files
/**
* Allow cross origin to access our /public directory from any site.
* Make sure this header option is defined before defining of static path to /public directory
*/
expressApp.use('/public',function(req, res, next) {
res.setHeader("Access-Control-Allow-Origin", "*");
// Request headers you wish to allow
res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
// Set to true if you need the website to include cookies in the requests sent
res.setHeader('Access-Control-Allow-Credentials', true);
// Pass to next layer of middleware
next();
});
/**
* Server is about set up. Now track for css/js/images request from the
* browser directly. Send static resources from "./public" directory.
*/
expressApp.use('/public', express.static(path.join(__dirname, 'public')));If you want to set Access-Control-Allow-Origin to a specific static directory you can set the following.나열된 모든 답을 제외하고, 나는 같은 오류를 가지고 있었다.
프런트엔드와 백엔드에 모두 액세스할 수 있으며 이미 코르스 모듈을 추가했습니다.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 지시어 값을 해야 합니다.client_max_body_size http ★★★★★★★★★★★★★★★★★」server.
server {
client_max_body_size 100M;
...
}
원하는 값을 설정하면 변경을 저장하고 Nginx를 새로고침합니다.service nginx reload
이 변경 후, 잘 작동하고 있습니다.
참조: https://www.keycdn.com/support/413-request-entity-too-large # : ~ : text = % 23 , processed % 20 by % 20 the % 20 web % 20 server . & text = An% 20 example % 20 request % 2C% 20 이 될 수 있습니다(예: % 20a % 20 large % 20 media % 20 file )
상위 2개의 답변이 제 편집을 수락하는지 확인하겠지만, 아마 추가 또는 사용을 하셔야 할 것 같습니다.127.0.0.1대신localhost.
를 사용하여cors패키지, 둘 이상의 허용된 오리진을 사용할 수도 있습니다.
app.use(
cors({ origin: ["http://localhost:8888", "http://127.0.0.1:8888"] })
);
그리고 당신은origin: "*"당신이 뭔가를 허락하고 싶다면요.
자세한 내용은 Web Dev Simplified의 튜토리얼을 참조하십시오.
언급URL : https://stackoverflow.com/questions/18310394/no-access-control-allow-origin-node-apache-port-issue
'programing' 카테고리의 다른 글
| WordPress - Breadcrumb NavXT의 카테고리 문제 (0) | 2023.04.06 |
|---|---|
| 경고: "compass:server"(compass) 작업 실행 중 (0) | 2023.04.06 |
| TypeScript: 유형 '{}'에 속성이 없습니다. (0) | 2023.04.06 |
| 각도와 함께 쉼표를 목록 구분 기호로 사용JS (0) | 2023.04.06 |
| Angular.js:$eval은 어떻게 작동하며 왜 vanilla eval과 다른가요? (0) | 2023.04.06 |