[NODEJS] 없음 '액세스 제어 - 허용 - 원산지'- 노드 / 아파치 포트 문제

없음 '액세스 제어 - 허용 - 원산지'- 노드 / 아파치 포트 문제

해결법

1. ---

   1.당신의 NodeJS / 익스프레스 응용 프로그램 (나는 당신의 편의를 위해 몇 가지 의견을 추가 한)에 다음 미들웨어를 추가하십시오 :

   당신의 NodeJS / 익스프레스 응용 프로그램 (나는 당신의 편의를 위해 몇 가지 의견을 추가 한)에 다음 미들웨어를 추가하십시오 :

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

   희망이 도움이!

2. ---

   2.허용 대답은 당신이 짧은 것을 선호하는 경우에, 당신은 플러그인을 Express.js 사용할 수라는 고르을 사용할 수있다, 괜찮습니다

   허용 대답은 당신이 짧은 것을 선호하는 경우에, 당신은 플러그인을 Express.js 사용할 수라는 고르을 사용할 수있다, 괜찮습니다

   그것은이 특별한 경우에 사용하기 간단합니다 :

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

3. ---

   3.또 다른 방법은, 단순히 경로에 헤더를 추가한다 :

   또 다른 방법은, 단순히 경로에 헤더를 추가한다 :

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

4. ---

   4.상단의 대답은 내가 허용 된 사이트 목록 개 이상의 도메인에 필요한 것을 제외하고, 나를 위해 벌금을했다.

   상단의 대답은 내가 허용 된 사이트 목록 개 이상의 도메인에 필요한 것을 제외하고, 나를 위해 벌금을했다.

   또한, 사실에서 최고 응답 겪고있다 OPTIONS 요청이 미들웨어에 의해 처리되지 않는다는 것을 당신은 자동으로하지 않습니다.

   나는 Express 구성에 allowed_origins으로 허용 된 도메인을 저장하고 액세스 제어 - 허용 - 원산지가 하나 개 이상의 도메인을 지정하는 것을 허용하지 않기 때문에 원산지 헤더에 따라 올바른 도메인을 넣어.

   여기에 내가 함께 결국 무엇을 :

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

5. ---

   5.대답 코드는 로컬 호스트에만 허용 : 8888. 이 코드는 생산, 또는 다른 서버 및 포트 이름에 배포 할 수 없습니다.

   대답 코드는 로컬 호스트에만 허용 : 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();
   });
   

6. ---

   6.프로젝트에서 고르 의존성을 설치합니다 :

   프로젝트에서 고르 의존성을 설치합니다 :

   npm i --save cors
   

   서버 구성 파일 다음에 추가 :

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

   그것은 2.8.4 고르 버전 나를 위해 작동합니다.

7. ---

   7.프론트 엔드와 백엔드가 다른 포트에서 실행되는 경우 안녕이 발생합니다. 때문에 CORS 헤더의 부재로 브라우저는 블록 백엔드에서 응답을. 이 솔루션은 백엔드 요청에 CORS 헤더를 추가하는 것입니다. 가장 쉬운 방법은 사용 고르 NPM 패키지입니다.

   프론트 엔드와 백엔드가 다른 포트에서 실행되는 경우 안녕이 발생합니다. 때문에 CORS 헤더의 부재로 브라우저는 블록 백엔드에서 응답을. 이 솔루션은 백엔드 요청에 CORS 헤더를 추가하는 것입니다. 가장 쉬운 방법은 사용 고르 NPM 패키지입니다.

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

   이것은 모든 요청에 ​​CORS 헤더 수있게된다. 자세한 내용은 당신이 고르 설명서를 참조 할 수 있습니다

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

8. ---

   8.이것은 나를 위해 일했다.

   이것은 나를 위해 일했다.

   app.get('/', function (req, res) {
   
       res.header("Access-Control-Allow-Origin", "*");
       res.send('hello world')
   })
   

   당신은 당신의 요구에 맞게 * 변경할 수 있습니다. 이 캔의 도움을 바랍니다.

9. ---

   9.

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

10. ---

    10."액세스 제어 - 허용 - 원산지"각도 6 오류 또는 다른 프레임 워크를 방지하기 위해 NODE 평안한 API를 app.js에 다음 코드를 추가합니다

    "액세스 제어 - 허용 - 원산지"각도 6 오류 또는 다른 프레임 워크를 방지하기 위해 NODE 평안한 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
    }));
    

11. ---

    11.당신이 사용할 수있는 "$ http.jsonp"

    당신이 사용할 수있는 "$ http.jsonp"

    또는

    다음은 현지 테스트를위한 크롬의 작업 주위입니다

    당신은 명령을 다음과 같이 당신의 크롬을 열어야합니다. (누르면 윈도우 +의 R)

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

    참고 : 귀하의 크롬을 열 수 없습니다해야합니다. 이 명령을 실행하면 크롬이 자동으로 열립니다.

    당신은 명령 프롬프트에서이 명령을 입력하는 경우 다음 크롬 설치 디렉토리는 다음이 명령을 사용하여 선택합니다.

    "--allow-파일 액세스에서-파일"와 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 &"
    

    두 번째 옵션

    당신은 (1) 플래그를 추가 오픈 사용할 수 있습니다 열려 -a '구글 크롬'을 --args --allow-파일 액세스 -에서 - 파일

12. ---

    12./ ** * 크로스 기원은 어떤 사이트에서 우리의 / 공용 디렉토리에 액세스 할 수 있도록 허용합니다. * 확인이 헤더 옵션은 정적 경로의 정의하기 전에 정의되어 있는지 확인 / 공용 디렉토리 * / expressApp.use ( '/ 대중', 기능 (REQ, 고해상도, 다음) { res.setHeader ( "액세스 제어 - - 원산지 허용", "*"); // 요청 헤더는 허용 할 res.setHeader는 ( "액세스 제어 - 허용 - 헤더가", "기원은, X는-요청-로를, 콘텐츠 형식이 수락"); true로 // 설정 당신이 보낸 요청에서 쿠키를 포함하는 웹 사이트를 필요로하는 경우 res.setHeader ( '액세스 제어 - 허용 - 자격 증명', TRUE); 미들웨어의 다음 계층에 // 패스 다음(); }); / ** * 서버는 약 설정되어 있습니다. 이제 CSS / JS에 대한 추적 / 이미지는에서 요청 * 직접 브라우저. "./public"디렉토리에서 정적 리소스를 보냅니다. * / expressApp.use ( '/ 공개'express.static (path.join (__ dirname은 '공개'))); 특정 정적 디렉토리에 액세스 제어 - 허용 - 원산지를 설정하려면 다음을 설정할 수 있습니다.

    / ** * 크로스 기원은 어떤 사이트에서 우리의 / 공용 디렉토리에 액세스 할 수 있도록 허용합니다. * 확인이 헤더 옵션은 정적 경로의 정의하기 전에 정의되어 있는지 확인 / 공용 디렉토리 * / expressApp.use ( '/ 대중', 기능 (REQ, 고해상도, 다음) { res.setHeader ( "액세스 제어 - - 원산지 허용", "*"); // 요청 헤더는 허용 할 res.setHeader는 ( "액세스 제어 - 허용 - 헤더가", "기원은, X는-요청-로를, 콘텐츠 형식이 수락"); true로 // 설정 당신이 보낸 요청에서 쿠키를 포함하는 웹 사이트를 필요로하는 경우 res.setHeader ( '액세스 제어 - 허용 - 자격 증명', TRUE); 미들웨어의 다음 계층에 // 패스 다음(); }); / ** * 서버는 약 설정되어 있습니다. 이제 CSS / JS에 대한 추적 / 이미지는에서 요청 * 직접 브라우저. "./public"디렉토리에서 정적 리소스를 보냅니다. * / expressApp.use ( '/ 공개'express.static (path.join (__ dirname은 '공개'))); 특정 정적 디렉토리에 액세스 제어 - 허용 - 원산지를 설정하려면 다음을 설정할 수 있습니다.

13. ---

    13.그렇다 나열된 모든 답변에서, 나는 같은 오류가 있었다

    그렇다 나열된 모든 답변에서, 나는 같은 오류가 있었다

    나는 프론트 엔드와 백엔드, 나는 이미 추가 고르이 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입니다 결정합니다. 이 지시어는 이미 /etc/nginx/nginx.conf에있는 당신의 nginx.conf 파일에 정의 될 수 지금 당신은 http 또는 서버에서 / 편집에게 지시 client_max_body_size의 값을 추가해야합니다.

    server {
        client_max_body_size 100M;
        ...
    }
    

    서비스의 nginx 다시로드 : 당신은 당신의 변경 및 재 장전 Nginx에 저장, 원하는 값을 설정하면

    이러한 변경 후, 그것은 잘 작동하고

    참조 : https://www.keycdn.com/support/413-request-entity-too-large#:~:text=%23,processed%20by%20the%20web%20server.&text=An%20example%20request% 2C % 20that % 20may 예 20A % % % 20large 20media 20file %).

from https://stackoverflow.com/questions/18310394/no-access-control-allow-origin-node-apache-port-issue by cc-by-sa and MIT license