Axios를 사용한 액세스 제어 오리진 헤더 오류

Axios를 사용한 액세스 제어 오리진 헤더 오류

리액트 웹 앱에서 Axios를 사용하여 API 호출을 하고 있습니다.하지만 Chrome에서 다음 오류가 나타납니다.

XMLHttpRequest cannot load
https://example.restdb.io/rest/mock-data. No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:8080' is therefore not allowed
access. 

{
    axios
      .get("https://example.restdb.io/rest/mock-data", {
        headers: {
          "x-apikey": "API_KEY",
        },
        responseType: "json",
      })
      .then((response) => {
        this.setState({ tableData: response.data });
      });
}

, 같은에 관한 「」의 인가 읽어 .Access-Control-Allow-Origin이걸 어떻게 풀어야 할지 모르겠더라고요.나는 이것을 해결하기 위해 크롬의 확장이나 임시 해킹을 사용하고 싶지 않다.위의 문제를 해결하기 위한 표준적인 방법을 제안해 주십시오.

몇 가지 답을 시도해 본 결과,

headers: { 
  'x-apikey': '59a7ad19f5a9fa0808f11931',
  'Access-Control-Allow-Origin' : '*',
  'Access-Control-Allow-Methods':'GET,PUT,POST,DELETE,PATCH,OPTIONS',
},

에러는 다음과 같습니다.

Request header field Access-Control-Allow-Origin is not
allowed by Access-Control-Allow-Headers in preflight response 

나는 이 복잡한 주제에 도전해 볼 것이다.

기원이란?

를 들어, 「스킴, 호스트명, 포트」입니다.https://www.google.com 파일일 도 있습니다.file://기타. 무엇인가가(웹페이지 등) 유래된 것입니다. [ ]으로 https://www.google.com는 '출처'입니다.https://www.google.com이의 .에서 확인할 수 있습니다.Security:

파일 탐색기를 통해 로컬 HTML 파일을 여는 경우에도 마찬가지입니다(서버를 통해 제공되지 않음).

이게 CORS 문제랑 무슨 상관이죠?

[ ]으로 했을 때https://website.example는 의 https://website.example이 웹사이트는 대부분 이미지, 아이콘, js 파일만 가져오고 API 호출을 수행합니다.https://website.example는 기본적으로 서비스된 서버와 동일한 서버를 호출합니다.같은 발신지에 콜을 발신하고 있습니다.

웹 브라우저를 열고 로컬 HTML 파일을 열 때 예를 들어 Google에 요청을 하려는 JavaScript가 있는 경우 다음과 같은 오류가 발생합니다.

같은 발신기지 정책은 브라우저에 크로스 발신기지 요구를 차단하도록 지시합니다. origin은 " " " 입니다.null is is is 。https://www.google.com(교차 요구).설정되어 있는 CORS 정책 및 크로스 오리진 요구는 허용되지 않기 때문에 브라우저는 이를 허용하지 않습니다.

내 페이지가 localhost 상의 서버에서 서비스된 경우에도 마찬가지입니다.

로컬 호스트 서버의 예

localhost API 상에서 localhost:3000다음 코드를 사용합니다.

const express = require('express')
const app = express()

app.use(express.static('public'))

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

app.listen(3000, () => {
    console.log('alive');
})

HTML 파일(HTML에 )을.localhost:3000 탐색기의 다음과 같은 오류가 발생합니다.server ) 디 、 음 、 음 、 음 、 음 server server server 。

는 의 때문에localhost:3000파일 탐색기를 통해 원본이 서버 API 원본과 동일하지 않기 때문에 교차 원본 요청이 시도되고 있습니다.브라우저는 CORS 정책으로 인해 이 시도를 중지하고 있습니다.

단, 코멘트된 행의 코멘트를 해제하는 경우는, 다음과 같습니다.

const express = require('express')
const app = express()

app.use(express.static('public'))

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

app.listen(3000, () => {
    console.log('alive');
})

다시 시도해보십시오.

HTTP 응답을 송신하는 서버에는 서버에 크로스 오리진 요구가 발생해도 좋다는 헤더가 포함되어 있기 때문에 브라우저는 이 처리를 허용하므로 오류가 발생하지 않습니다.

확실히 하자면, CORS 정책은 유해하고 악의적인 코드로부터 사람들을 보호하기 위한 현대 브라우저의 보안 기능입니다.

수리 방법 (다음 중 하나)

• 요청의 위치(같은 호스트)와 동일한 원본에서 페이지를 제공합니다.
• 서버가 응답 헤더에 명시적으로 기입하여 크로스 오리진 요청을 수신할 수 있도록 합니다.
• Nginx 등의 리버스 프록시를 사용하는 경우 CORS를 허용하는 응답 헤더를 전송하도록 Nginx를 설정합니다.
• 브라우저를 사용하지 마십시오.예를 들어 cURL을 사용하면 브라우저와 같은 CORS 정책에는 관심이 없으며 원하는 것을 얻을 수 있습니다.

흐름의 예

Cross-Origin Resource Sharing(CORS)에서 가져온 내용입니다.

같은 발신기지 정책은 브라우저에 크로스 발신기지 요구를 차단하도록 지시합니다.다른 원본에서 공용 리소스를 가져오려면 리소스 제공 서버가 브라우저에 "요구의 원본이 내 리소스에 액세스할 수 있습니다."라고 알려야 합니다.브라우저는 이를 기억하고 발신기지 간 자원 공유를 허용합니다.

• 스텝 1: 클라이언트(브라우저) 요구 브라우저가 크로스 오리진 요구를 할 때 브라우저는 현재 오리진(스킴, 호스트 및 포트)을 가진 오리진 헤더를 추가합니다.

• 스텝 2: 서버 응답 서버 측에서 서버가 이 헤더를 보고 접근을 허용하려면 요청 오리진을 지정하는 응답에 Access-Control-Allow-Origin 헤더를 추가해야 합니다(또는 임의의 오리진을 허용하려면 *).

• 스텝 3: 브라우저가 응답을 수신합니다.브라우저가 적절한 Access-Control-Allow-Origin 헤더를 가진 응답을 검출하면 브라우저는 응답 데이터를 클라이언트사이트와 공유할 수 있습니다.

기타 링크

다음은 무슨 일이 일어나고 있는지에 대한 또 다른 좋은 답변입니다.https://stackoverflow.com/a/10636765/1137669

백엔드가 CORS를 지원하는 경우 요청에 다음 헤더를 추가해야 할 수 있습니다.

headers: {"Access-Control-Allow-Origin": "*"}

[갱신] Access-Control-Allow-Origin은 응답 헤더이므로 CORS를 활성화하려면 서버로부터의 응답에 이 헤더를 추가해야 합니다.

그러나 대부분의 경우 서버가 CORS를 활성화하지 않고 프런트엔드에서 백엔드로 요구를 리다이렉트할 수 있도록 리버스 프록시를 설정하는 것이 좋습니다.

CORS 메카니즘에 관한 메뉴얼은, https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS 를 참조해 주세요.

도 같은 만, 제 , ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★.withCredentials: true요청에서는 CORS 체크를 활성화하고 헤더에서는 동일한 체크를 발행하면 체크를 회피할 수 있습니다.

이유: CORS 헤더 'Access-Control-Allow-Credentials'에 'true'가 필요합니다.

사용 안 함

withCredentials: true

단, 세트

'Access-Control-Allow-Credentials':true

를 참조해 주세요.

Boot의 - 앱을 Spring Boot에 하였습니다.- React js 。@CrossOrigin컨트롤러에 주석을 달면 다음과 같이 동작합니다.

@CrossOrigin(origins = {"http://localhost:3000"})
@RestController
@RequestMapping("/api")

그러나 localhost를 올바르게 추가해 주세요=> '/'가 아닌 '/'localhost:3000'을 => '/localhost:3000/' 끝에 추가합니다.이것은 저의 문제였습니다.

저도 같은 실수를 했어요.「CORS」를 하고, 백엔드에 를 인스톨 했습니다.npm i cors그런 다음 코드에 다음을 추가해야 합니다.

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

이것으로 수정되었습니다.이제 맞춤형 헤더를 추가하지 않고도 AJAX를 사용하여 양식을 게시할 수 있습니다.

코르스 패키지 교환을 이용하신 분들을 위해

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

로.

const cors = require('cors');  
app.use(cors({credentials: true, origin: 'http://localhost:5003'}));

http://localhost:5003을 클라이언트 도메인으로 변경

요청에 Access-Control-Allow-Origin 헤더를 사용하는 것은 도움이 되지 않지만 이 헤더는 응답에서만 사용할 수 있습니다.

이 기능을 사용하려면 응답에 이 헤더를 추가해야 합니다.해 볼 .crossorigin:true당신의 요청에 따라.

우선 CORS는 서버측 문제이지 클라이언트측 문제가 아닙니다만, 다른 애플리케이션이 다른 도메인에서 같은 서버를 사용하고 있기 때문에 서버코드가 맞다고 확신하고 있었습니다.이에 대한 솔루션은 다른 답변에서 자세히 설명되어 있습니다.

axios커스텀 인스턴스(instance)를 사용합니다.로 쓸 때 요.의 URL »axios, 「 「」를 「」로 .GET ★★★★★★★★★★★★★★★★★」POST을 발신하면, 사이에 / 를 합니다.URL " " " URL "이것도 일리는 있지만, 숨겨진 문제였습니다.이 문제의 원인이 되고 있는 후행 슬래시를 제거하기 위해 Laravel 서버가 리다이렉트하고 있었습니다.

으로 프리플라이는OPTIONS다이이 이키 좋키 이키 좋키 이키 이키 이키 이키 이키 이키서버가 301 상태 코드로 리다이렉트 하는 경우는, 다른 레벨로 캐시 되는 일이 있습니다.★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

CORS가 어떻게 작동하는지 알아내기 위해 오랜 시간을 노력한 후.FE와 BE 코드로 수정하기 위해 여러 가지 방법을 시도했습니다.CORS 에러가 표시되는 경우도 있고, 서버가 클라이언트로부터 본문을 수신하지 않는 경우도 있고, 그 외의 에러도 있습니다.

그리고 마침내 이 길로 들어섰다.이게 도움이 됐으면 좋겠는데

BE 코드(NodeJS + Express)

var express = require("express");
const cors = require("cors");

var app = express();
app.use(
  cors({
    origin: "*",
  })
);

app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  next();
});

// your routers and codes 

내 FE 코드(JS):

fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Connection: 'Keep-Alive',
      Authorization: `Bearer test`,
    },
    body: JSON.stringify(data),
  });

나는 모든 사람들이 코르사가 무엇이고 무엇을 위한 것인지 알고 있다고 생각한다.간단한 방법으로 예를 들어 nodejs 및 express를 관리에 사용하는 경우 다음과 같이 활성화합니다.

의존관계:

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

app.use (
   cors ({
     origin: "*",
    ... more
   })
);

또한 로컬 브라우저 요청의 문제는 이 확장판 구글 크롬을 설치하는 것 뿐입니다.

이름: Allow CORS: Access-Control-Allow-Origin

https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=es

이것에 의해, 로컬에서의 크로스를 유효 또는 무효로 해, 문제를 해결할 수 있습니다.

React Axios 인스턴스를 만들 때도 비슷한 문제가 있었습니다.

아래의 방법으로 해결했습니다.

const instance = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com/",
  withCredentials: false,
  headers: {
    'Access-Control-Allow-Origin' : '*',
    'Access-Control-Allow-Methods':'GET,PUT,POST,DELETE,PATCH,OPTIONS',
    }
});

npm i cors
const app = require('express')()
app.use(cors())

위 코드는 나에게 효과가 있었다.

컨피규레이션을 를 작성한 후 이 인스턴스Axios를 할 수 .
을 axios-configure.js이 공유 가능한 하고, 을 사용합니다.preconfigured import 수입( ( ()axios기존 방식대로 직접 사용할 수 있습니다.

import axios from 'axios';
import baseUrl from './data-service';

const app = axios.create({
    baseURL: baseUrl,
    headers: {
        'Access-Control-Allow-Origin': '*',
        'Content-Type': 'application/json',
    },
    withCredentials: true
})

export default app;

내보낸 함수를 다음과 같이 사용합니다.

import axios from '../YOUR_DIRECTORY/axios-configure';
axios.get();// wont throw cors

않다import axios from axios;
으로 ' '를 사용합니다.axios.get()은 않는다cors

NOTE this solution will work for them who facing CORS at local environment as local starts at 5000 and backend at 8080, but in production, build gets deployed from java 8080 no CORS in productions (Facing CORS at only local environment)

문제는 localhost:3000에서 localhost:8080으로 요청이 전송되고 브라우저가 CORS 등의 요청을 거부한다는 것입니다.그래서 해결책은 프록시를 만드는 것이었다.

나의 솔루션은 다음과 같습니다.

import proxy from 'http-proxy-middleware'
app.use('/api/**', proxy({ target: "http://localhost:8080" }));

$ npm install cors

npm에서 Cors를 설치한 후 노드 앱 파일에 아래 코드를 추가합니다.그것으로 내 문제가 해결되었다.

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

app.use(cors())

프록시 패키지를 사용해 보세요.json 추가 코드:

"proxy":"https://localhost:port"

npm을 다시 시작합니다.

같은 코드

const instance = axios.create({
  baseURL: "/api/list", 
 
});

경우에 따라서는 cors 프록시를 사용할 수 있습니다.https://cors.sh

노드 js(백엔드)에서 corsnpm 모듈 사용

$ npm install cors

다음으로 Access-Control-Allow-Origin을 지원하기 위해 다음 행을 추가합니다.

const express = require('express')
const app = express()
app.use(cors())
app.get('/products/:id', cors(), function (req, res, next) {
            res.json({msg: 'This is CORS-enabled for a Single Route'});
});

외부 모듈을 필요로 하지 않고 동일한 기능을 구현할 수 있습니다.

app.use(function(req, res, next) {
            res.header("Access-Control-Allow-Origin", "*");
            res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
            next();
});

 },
  "proxy": "http://localhost:8080",
  "devDependencies": {

패키지에 프록시를 사용합니다.json

언급URL : https://stackoverflow.com/questions/45975135/access-control-origin-header-error-using-axios