Axios: 사이트 간 POST를 작동할 수 없습니다.

또한 구성에서 withCredentials를 true로 설정하고 있습니다.

방금 이 문제가 발생했으며 Mac에서만 발생하는 것 같습니다. 나는 내 네트워크를 디버깅하려고 밤낮으로 좋은 시간을 보냈고 바닐라 XHR 요청을 사용하여 이것을 시도하기로 결정했고 문제가 내 네트워크가 아니라 axios라는 것을 깨달았습니다.

나도 자격 증명이 true로 설정된 교차 사이트 요청을 수행하고 있습니다. 네트워크 요청을 보면 ERR_EMPTY_RESPONSE가 표시되며 브라우저를 떠나기도 전에 요청이 실패한 것과 같습니다.

이것은 내 구성입니다.

const myApi = axios.create({
  baseURL: 'http://someUrl/someEndpoint',
  timeout: 10000,
  withCredentials: true,
  transformRequest: [(data) => JSON.stringify(data.data)],
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  }
});'

기회가 된다면 이 부분에 대해 더 알아보도록 하겠습니다.

아, 제정신이 아니구나. :) 가능하면 이것을 살펴보십시오.

내 문제는 Axios와 관련이 없는 것으로 나타났습니다. Cisco Anyconnect가 내 시스템의 옵션 요청을 차단하고 있었습니다. 이유가 무엇입니까?

교차 도메인 요청에는 추가 구성이 필요하지 않습니다. 이전 IE의 경우 XDomainRequest 를 사용하는 것으로 대체됩니다. https://github.com/mzabriskie/axios/blob/master/lib/adapters/xhr.js#L22

더 자세한 정보를 제공할 수 있습니까? 어떤 브라우저, OS, axios 버전, 모든 오류 메시지.

Jenny에 대해 말할 수는 없지만 특히 이 라이브러리는 Cisco Anyconnect 기본 보안에 의해 요청이 차단되도록 하므로 다른 보안 설정에서도 이 작업을 수행할 수 있습니다. 나는 이것을 추적하려고 노력하고 있지만 지금까지는 운이 없습니다.

이것은 cisco Anyconnect 및 기타 VPN 클라이언트가 설치된 Mac에서 사이트 간 요청을 만들어 재현할 수 있습니다.

내 환경은 다음과 같습니다.

• 액시오스 0.8.1
• 엘 캐피탄
• 크롬
• 오류 메시지: "요청한 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다. 따라서 Origin ' http://localhost :3000'은(는) 액세스가 허용되지 않습니다."

동일한 요청이 curl에서도 작동한다는 점에 유의하십시오.

조사해 주셔서 감사합니다!

CORS를 사용하면 요청이 허용되는지 확인하기 위해 서버에 실행 전 요청이 이루어집니다. 모든 출처의 요청을 허용하는 Acces-Control-Allow-Origin: * 헤더를 설정하여 요청 방법으로 OPTIONS 가 있는 요청에 서버가 응답하도록 해야 합니다. 또는 특정 출처 Acces-Control-Allow-Origin: http://example.com 만 허용할 수 있습니다.

네, 이해합니다. 하지만 서버는 내 것이 아닙니다. Baas(backend-as-a-service)를 사용하고 있습니다. 그리고 그들은 이미 내 도메인을 허용 목록에 추가했습니다. Baas를 사용하는 다른 사람들은 그런 문제가 없었는지 확인했습니다.

나는 당신이 제공한 오류 메시지를 무시할 것이지만, 그것에 따르면 당신이 baas가 당신을 위해 일하고 있는 것처럼 들리지 않습니다. 교차 출처 보안은 브라우저 내의 제한 사항일 뿐이므로 curl을 사용하면 실패하지 않습니다.

브라우저에서 네트워크 탭을 열고 OPTIONS 요청에 대한 응답으로 얻은 것을 공유할 수 있습니까? 응답 데이터와 헤더를 보는 것이 이 문제를 디버그하는 데 도움이 되기를 바랍니다.

감사 해요

헤더는 다음과 같습니다.

다음은 axios를 사용하여 API에서 내 사용자 프로필을 가져올 때 GitHub의 응답 헤더입니다.

GitHub에서 Access-Control-Allow-Origin: * 추가한 것을 볼 수 있습니다. Baas의 응답에 Access-Control 유형 헤더가 없습니다.

알겠습니다 흠. 답변이 엄청나게 늦어 죄송합니다. 이에 대해 조금 더 살펴보겠습니다. 매우 감사합니다.

내가보고있는 것이 관련이 있는지 여부는 확실하지 않습니다. 기본적으로 원격 서버에 인증 요청을 보내고 쿠키를 다시 받을 수 있지만 서버에 대한 후속 호출은 쿠키와 함께 쿠키를 보내지 _않으므로_ 오류가 발생합니다.

다음은 로그인을 위한 POST 호출의 헤더입니다.

그리고 이제 후속 GET 호출:

origin 아래 나열된 IP 주소는 제 소유이므로 문제가 되지 않습니다. 이 위치가 잘못된 경우 새 문제를 만들거나 적절한 기존 문제에 첨부하겠습니다.

새로운 주름으로; 직선 XHR을 사용하여 후속 GET 호출을 테스트했으며 쿠키가 제대로 전송되었습니다. 그러나 Axios를 통해 동일한 호출을 수행하면 위에서 언급한 동일한 문제가 발생합니다.

어. 무시하십시오 - Axios를 통해 예상대로 물건을 보내지 않았습니다. :)

저도 같은 문제에 직면하고 있습니다.
OPTIONS 호출은 통과하지만 POST 호출은 cors에 멈춥니다.
http://stackoverflow.com/questions/36907693/axios-cors-issue-with-github-oauth-not-getting-access-token

어떻게 그런 거대한 문제가 해결되지 않습니까?

+1

+1

+1

+1

+1

+1

+1

@dsacramon 당신이 보고 있는 문제는 무엇입니까? 보고되는 문제의 대부분은 서버 문제나 오경보 문제인 것 같습니다. 내가 볼 수 있는 재현 가능한 오류가 있는 경우 수정 작업을 하게 되어 기쁩니다.

이것도 받고

XMLHttpRequest는 https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=fish를 로드할 수 없습니다 http://localhost :3000'은 액세스가 허용되지 않습니다.

또한 fetch to note를 사용하여 가져옵니다. 나는 그것의 크롬이 최근에 그들의 요청 설정 정책을 더 엄격하게 만들었다고 생각한다. 나는 그것이 어떤 종류의 헤더가 필요할 것이라고 생각한다.

다음은 몇 가지 예입니다(둘 다 https를 통해 제공됨)

예 1 - 잘 작동

axios.get('https://randomuser.me/api/')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

예제 2 - 작동하지 않음 - 오류 표시 ?

axios.get('https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=fish')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

여기에 오류 응답이 있습니다

[object Error] {
  config: [object Object] {
    data: undefined,
    headers: [object Object] { ... },
    maxContentLength: -1,
    method: "get",
    timeout: 0,
    transformRequest: [object Object] { ... },
    transformResponse: [object Object] { ... },
    url: "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=fish",
    validateStatus: function validateStatus(status) {
      return status >= 200 && status < 300;
    },
    xsrfCookieName: "XSRF-TOKEN",
    xsrfHeaderName: "X-XSRF-TOKEN"
  },
  response: undefined
}

관련이 있을 수 있는 것이 transformResponse 에 있습니까? PROTECTION_PREFIX 비트가 무엇을 의미하는지 궁금합니다.

[object Object] {
  0: function transformResponse(data) {
      /*eslint no-param-reassign:0*/
      if (typeof data === 'string') {
        data = data.replace(PROTECTION_PREFIX, '');
        try {
          data = JSON.parse(data);
        } catch (e) { /* Ignore */ }
      }
      return data;
    }
}

노력하는 것조차

모드: '노코르'
가져 오기에서 여전히이 오류가 발생합니다.

나는 대답이 매우 간단하고 일종의 헤더가 필요하다고 확신합니다. 다만 그것이 무엇인지는 확실하지 않습니다. 계속해서 놀고 있을 것입니다.

wikipedia api는 이상한 예일 수 있으며 다른 사람들에게도 동일한 오류가 있습니까?

이 코드를 삭제하면 작동할 수 있습니다. axios.defaults.withCredentials = true

jsonp 와 잘 작동하도록 wikipedia API를 얻었습니다.

var jsonp = require('jsonp');

// search for 'frog'
jsonp('https://en.wikipedia.org/w/api.php?action=opensearch&search=frog&format=json', null, function (err, data) {
  if (err) {
    console.error(err.message);
  } else {
    console.log(data);
  }
});

추가 구성이 필요하지 않습니다.

axios와 동일한 오류가 발생합니다. 내 React 구성 요소는 다음과 같습니다.

import React, { Component } from 'react'
import axios from 'axios'

export default class User extends Component {
  constructor(props){
    super(props)

    // axios.defaults.withCredentials = true

    const config = {
    method: 'get',
    url: 'https://api.airbnb.com/v2/users/2917444?client_id=3092nxybyb0otqw18e8nh5nty&_format=v1_legacy_show',
    headers: {'X-Requested-With': 'XMLHttpRequest'},
    responseType: 'json',
    withCredentials: true,
  }

    axios.request(config)
      .then(response => { console.log('response: ', response) });

  }

  render() {
    return (
      <div>User</div>
    )
  }
}

_참고: Node 요청으로 API를 완벽하게 사용할 수 있습니다._

@Sinistralis 와 동일한 오류가 발생했습니다. Mac OSX의 최신 버전의 크롬에서 제대로 작성된 CORS 요청에 대해 net::ERR_EMPTY_RESPONSE 를 받고 있습니다(내 서버는 OPTIONS를 포함한 모든 CORS 헤더를 잘 처리함). iOS10 사파리에서는 똑같은 코드가 문제 없이 작동하기 때문에 이상합니다. 이 문제가 어떻게 해결될 수 있는지 알아보기 위해 조금 더 직접 조사해 보겠습니다.

최신 버전의 크롬이 설치된 이전 Mac(10.11)에서 정확히 동일한 코드로 이 오류를 재현할 수 없습니다. 이것은 참으로 매우 이상합니다. 매우 간단한 앱인 http://lights.suyashkumar.com 을 방문하여 콘솔을 검사하여 재현할 수 있습니다(코드는 여기에 있습니다 . 일부 컴퓨터에서는 오류가 발생하지 않고 로그인으로 리디렉션됩니다. 다른 컴퓨터에서는 리디렉션되지 않고 기본 페이지에 남게 됩니다.

내 오류를 해결했습니다. 저에게는 config.headers 의 헤더를 애플리케이션 시작 시 null 값으로 할당하는 것과 관련된 문제였습니다(로컬 스토리지에서 값을 가져오고 처음에는 아무 것도 없음). 값이 null일 때 값을 빈 문자열로 할당하면 문제가 해결됩니다. 이것이 axios 내에서 처리될 수 있거나 처리되어야 하는 항목인지 궁금합니다(_가끔_ 중단되는 경우 xhr에 null 헤더를 전달하는 데 값이 있는지 확실하지 않음).

비슷한 문제가 있는 다른 사람들의 경우 일부 VPN 클라이언트도 OPTIONS 요청을 차단할 수 있음을 발견했습니다( 여기 참조).

오해의 소지가 있는 CORS 오류는 여전히 문제입니다. fetch 폴리필은 이 문제를 해결하기 위해 mode: 'no-cors' 를 지원합니다.

우리가 운영하는 다른 환경의 시스템과 다른 포트의 동일한 시스템에 대해 요청하려면 이러한 종류의 요청을 수행해야 합니다!

@dreki 언급한 문제에 대한 설명을 제공하십시오.

서버가 단순히 오리진의 요청을 수락하지 않는 경우 클라이언트 측에서는 작업을 수행할 수 없습니다. 당신이 할 수 있다면 우리는 여기에 엄청난 보안 누출이 있을 것입니다(그리고 "우리"는 인터넷 전체를 의미합니다)...

나는 axios가 여기에서 완전히 일치하게 행동하고 반응한다고 생각합니다.

중요한 응답 헤더는 기본적으로 이 서버 측 서비스를 호출할 수 있는 유효한 출처를 설정하는 Access-Control-Allow-Origin 입니다. 클라이언트가 이러한 구성된 출처에서 호출하지 않는 경우 다음과 같은 콘솔 오류와 함께 요청이 거부됩니다.

XMLHttpRequest는 http://localhost :8080/v1/api/search?q=candles를 로드할 수 없습니다. 요청한 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다. 따라서 Origin ' http://localhost :9999'는 액세스가 허용되지 않습니다.

당신은 손님 목록에 없습니다.

내 문제를 해결했습니다.
내 특급 API에 액세스하려고했다 localhost:3000 에 내 VUE 응용 프로그램에서 localhost:8080 하지만, 오류 등을 얻고 있었다.
작동하려면 http:// 를 추가해야 합니다.
따라서 개발 테스트를 수행할 때 localhost:3000 대신 http://localhost:3000 사용하십시오.

Wikmedia API와 동일한 문제가 발생했습니다. CORS 페이지(https://www.mediawiki.org/wiki/Manual:$wgCrossSiteAJAXdomains)를 살펴보고 요청에 origin=*을 추가했고 문제가 해결되었습니다.

axios.get('https://en.wikipedia.org/w/api.php?action=opensearch&format=json&origin=*&search=Albert') .then(function(res) { console.log(res); }) .catch(function(err) { console.log('Error: =>' + err); })

무서운 오류 메시지를 받았지만 내 요청은 서버에 도달했습니다.

XMLHttpRequest cannot load "...url here...". No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

Axios 팀, 고칠 수 있습니까???

@mellogarrett 이것은 https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

중요한 인용:

"보안상의 이유로 브라우저는 스크립트 내에서 시작된 교차 출처 HTTP 요청을 제한합니다. 예를 들어 XMLHttpRequest 및 Fetch는 동일한 출처 정책을 따릅니다. 따라서 XMLHttpRequest 또는 Fetch를 사용하는 웹 애플리케이션은 자체 도메인에 대해서만 HTTP 요청을 만들 수 있습니다. 웹 애플리케이션을 개선하기 위해 개발자는 브라우저 공급업체에 도메인 간 요청을 허용하도록 요청했습니다."

이 문제가 있는 사람들 중 대부분은 OPTIONS 요청에 응답하는 서버가 없을 것입니다. OPTIONS 및 POST 요청 모두에 대한 핸들러(CORS 헤더 포함)가 있는지 확인하십시오. 클라이언트(axios)는 먼저 OPTIONS를 ping한 다음 POST를 수행합니다.

Firefox에서는 동일한 오류가 발생하지만 Chromium에서는 발생하지 않습니다. 그런 다음 (Firefox에서) NoScript가 원격 서버에 대한 요청을 막는 것을 기억했습니다. NoScript(또는 이와 유사한 플러그인)가 설치되어 있는 경우 먼저 확인하십시오.
제 경우에는 문제가 Axios와 관련이 없었습니다. 훌륭한 일을 해주셔서 감사합니다.

이 문제에 대한 수정 프로그램을 검색하는 다른 사람의 경우 동일한 증상이 있었지만 서버의 php.ini 설정에서 문제를 추적했습니다.

내 비행 전 OPTIONS 요청이 성공했고 적절한 POST 요청이 뒤따랐지만 @mellogarrett 과 비슷한 No 'Access-Control-Allow-Origin' header is present on the requested resource... 계속 받고 있었습니다 . 이것은 완전히 이상해 보였으므로 Chrome 플러그인 을 사용하여 CORS 보호를 일시적으로 비활성화했습니다. 그 후 문제가 실제로 PHP 오류라는 것을 알 수 있었습니다.

Deprecated: Automatically populating $HTTP_RAW_POST_DATA is deprecated and will be removed in a future version. To avoid this warning set 'always_populate_raw_post_data' to '-1' in php.ini and use the php://input stream instead. in Unknown on line 0

이 게시물 이 문제에 대한 더 많은 정보를 가지고 있지만, 당신은 PHP 5.6을 사용하는 경우 짧은에, 당신은 주석을 제거한다 always_populate_raw_post_data 귀하의 php.ini과 세트에 -1 . 다른 사람이 문제를 해결하는 데 몇 시간을 절약할 수 있기를 바랍니다. 🤓

안녕하세요 @daltonamitchell 동일한 문제가 있는 것 같습니다(조건에 따르면 동일한 문제임을 나타냄). 하지만 궁금한 점이 있습니다. 원시 포스트 데이터 오류가 문제라는 것을 어떻게 알아냈습니까? 크롬 플러그인을 사용할 때 CORS 요청이 진행되고 모든 것이 잘 작동한다고 언급했습니다. 그러나 헤더가 올바르게 설정되어 있어도 플러그인 없이는 작동하지 않습니다. 그래서 아마도 지원 중단 메시지가 표시되지 않을 수 있지만 문제는 여전히 있을 수 있습니다...? 그것을 확인하는 방법에 대해 조언을 줄 수 있습니까?

@RT-TL 플러그인은 CORS가 차단하지 않고 응답 내용을 보는 데만 사용됩니다. 제 경우에는 테스트 목적으로 Hello World 와 같은 문자열을 반환했기 때문에 CORS를 비활성화하면 다음과 같은 것을 보았습니다.

Deprecated: Automatically populating $HTTP_RAW_POST_DATA is deprecated and will be removed in a future version. To avoid this warning set 'always_populate_raw_post_data' to '-1' in php.ini and use the php://input stream instead. in Unknown on line 0
Hello World

컨트롤러 메소드 상단에 error_reporting(E_ERROR | E_WARNING | E_PARSE | E_NOTICE) 또는 error_reporting(E_ALL) 를 추가하여 PHP 경고를 활성화했는지 확인하십시오. 여전히 아무 것도 표시되지 않으면 간단한 JSON 응답을 반환하여 예상대로 보이는지 확인하겠습니다.

이 문제가 계속 발생하는 사람이 있습니까? 나는 같은 것을 실행하고있다 :

const instance = axios.create({
    baseURL: 'http://localhost/',
    responseType: 'json',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'Authorization': 'test',
        'X-Test': 'testing'
    }
})
axios.get('v2/portal/bar/foo?')

응답 헤더

HTTP/1.1 401 Unauthorized
Server: nginx/1.11.10
Date: Fri, 24 Mar 2017 07:12:13 GMT
Content-Type: application/json; charset=UTF-8
Content-Length: 0
Connection: keep-alive
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, PUT, DELETE, GET, OPTIONS
Access-Control-Allow-Headers: *

요청 헤더

OPTIONS /v2/portal/bar/foo? HTTP/1.1
Host: localhost
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://localhost:3000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.98 Safari/537.36
Access-Control-Request-Headers: authorization,content-type,x-test
Accept: */*
Referer: http://localhost:3000/dashboard/report
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: en-US,en;q=0.8,fr;q=0.6,nl;q=0.4,zh-TW;q=0.2,zh;q=0.2,zh-CN;q=0.2

내 헤더가 제대로 전송되지 않는 이유를 알 수 없습니다.

여기에서도 동일한 문제로 OPTIONS 요청이 수행되지만 POST 요청은 수행되지 않습니다.

TLDR: 가져오기가 작동하고 axios는 JSON.stingify 사용하지 않는 한 작동하지 않습니다.

따라서 OPTIONS가 교차 출처 요청에 대해 설정된 헤더와 함께 200을 반환하지만 POST는 수행되지 않는 이 오류의 변형도 보았습니다. 이 확장을 사용하고 예상대로 작동하기 시작합니다. 하지만 여기에는 일종의 문제가 있다고 확신합니다. 내 요청을 살펴보십시오.

내 서버가 Access-Control-Allow-Origin: * 로 응답하고 있습니다.
다음은 코드와 스크린샷이 있는 모든 예입니다.

액시오스:

axios.post('http://localhost:3001/card', { test: 'test' })

술책:

    return fetch('http://localhost:3001/card', {
      method: 'POST',
      body: { test: 'test' },
    })

JSON.stringify 와 함께

    return fetch('http://localhost:3001/card', {
      method: 'POST',
      body: JSON.stringify({ test: 'test' }),
    })

다음과 같이 내 데이터를 JSON.stringify 하여 axios가 작동하도록 할 수 있었습니다.

    return axios.post('http://localhost:3001/card', JSON.stringify({ test: 'test' }));

@kwhitaker가 설명한 것과 동일한 문제에 직면했습니다. @zlyi가 제안한 대로 axios.defaults.withCredentials = true; 행을 추가했고 모든 것이 예상대로 작동하기 시작했습니다.

모든 것을 시도했지만 여전히 문제가 있습니다. :(

모든 것을 시도했지만 여전히 문제가 있습니다. :(

.htaccsess에 다음을 추가하여 문제를 관리했습니다.

<IfModule mod_headers.c> 
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type" 
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS" 
</IfModule>

프록시를 사용하여 이 문제를 해결할 수 있었습니다. package.json 프록시 추가

{
    "proxy": "http://some-url/some-endpoint"
}

그런 다음 요청:

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response)
  })
  .catch(function (error) {
    console.log(error)
  })

이것은 서버 측 문제이며 응답 헤더에 'Acces-Control-Allow-Origin': '*' 가 있어야 합니다. Express를 사용하는 경우 보다 강력하고 우아한 구현을 위해 npm-cors 를 사용할 수 있습니다.

+1 @ProfNandaa
내 로컬 서버에서 내보내기를 만들었습니다.

# cors.js file
module.exports = (req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
}

그래서 나는 다음을 할당합니다.
```
const cors = 요구('cors');
라우터 사용(cors);
````
이제 계속 ... 감사합니다

서버가 OPTION 요청을 수락하지 않으면 오류가 발생합니다.

"서버에 OPTION 요청 처리 추가"라고 말하는 사람들의 경우 작동하지 않습니다. OPTION 요청 처리가 활성화된 로컬 환경을 실행하고 있습니다.

Axios.post(url, obj) 가 CORS 403 금지 오류를 반환했지만 Axios.post(url, JSON.stringify(obj)) 업데이트하면 올바르게 작동하는 위의 사용자와 동일하게 이 문제를 경험했습니다.

저는 간단한 튜토리얼 프로젝트를 진행 중이며 다양한 API에 액세스하는 데 문제가 있습니다. 내가 찾은 유일한 솔루션은 위의 thiagodebastos가 언급한 솔루션입니다.

나는 단순히 get을 jsonp로 대체했고 데이터에 액세스할 수 있었습니다.

나는이 문제가 있었고 koa-cors는 간단한 해결책이었습니다! (ProfNandaa에 따른 Express 사용자를 위한 npm-cors)

여전히 이것에 문제가 있는 사람들을 위해: Axios는 JSON.encoded 없이 요청의 본문으로 JSON을 전송하고 Axios 및 요청에 응답하는 서버가 올바르게 구성되었습니다.

실망스러운 시행착오를 겪었지만 Axios에서 잘 작동하는 도메인 간 요청이 있습니다.

몇 가지 사항:

요청이 작동하려면 다음을 확인하십시오.

• 서버는 모든 올바른 헤더가 설정된 200 이외의 다른 응답인 것처럼 OPTIONS 요청에 응답하며 "preflighted" 요청 은 실패합니다.

• 요청은 올바른 헤더로 이루어지며 서버는 필요한 모든 헤더로 응답합니다.

• 쿠키/인증 헤더 또는 TLS 클라이언트 인증서가 필요한 경우 Axios 요청에 대해 allowCredentials를 true로 보냅니다. 이것은 기본( axios.defaults.withCredentials = true ) 또는 요청별로 수행할 수 있습니다.

성공한 요청 헤더의 예

Access-Control-Request-Headers: Content-Type
Access-Control-Request-Method: GET

성공한 응답 헤더의 예

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS
Access-Control-Allow-Origin: http://your-origin-url.com

우리는 점차적으로 응답 헤더를 추가했고 다양한 조합으로 진단하기 어려운 오류와 예기치 않은 동작이 있음을 발견했습니다.

Access-Control-Allow-Credentials: true 가 없으면 쿠키가 전송되거나 지속되지 않습니다. 이는 해당 헤더에 대한 MDN 페이지를 읽은 후 의미가 있습니다.

이 문서를 읽으면 도움

문제가 있는 사람은 누구에게나 ...Allow-Headers: Content-Type 가 중요합니다.

Access-Control-Allow-Origin: '*'
Access-Control-Allow-Methods: ...
Access-Control-Allow-Headers: Content-Type, Accept

'Allow-Control-Allow-Origin: *'이라는 크롬 확장 프로그램을 사용 중입니다.
그것이 ur 문제를 도울 수 있기를 바랍니다.

Axios가 이 오류를 수정할 수 없는 이유를 이해하지 못하는 사람을 위해:

이것은 Axios 문제가 아닙니다. 브라우저 문제입니다. 브라우저의 JS는 적절한 헤더가 설정되지 않은 서버에 대한 요청을 거부합니다. 이것을 클라이언트에서 React와 같은 것과 함께 사용하는 경우 혼동하지 마십시오. 이것은 React 또는 Axios 문제가 아니며 단순히 CORS 표준을 준수하는 브라우저입니다.

JakeElder는 https://github.com/mzabriskie/axios/issues/191#issuecomment -311069164에서 API의 서버 측에서 수행해야 하는 작업에 대한 좋은 설명을 제공합니다.

액세스하려는 서버를 제어할 수 없는 경우 프록시 서버를 만들어 콘텐츠를 가져와 올바른 헤더와 함께 반환해야 합니다.

이것이 구현된 이유는 확실하지 않습니다. 정보를 얻기 위해 서버에 요청을 하고 싶지만 서버에 특정 헤더 세트가 없기 때문에 할 수 없는 경우 확실히 짜증납니다. 매우 제한적인 것 같습니다. 아 글쎄 ...

@robins-eldo 다시 말하지만, 나는 당신이 옳다고 생각하지 않습니다.

내 원래 의견:

For those commenting saying "Add OPTION request handling to your server", that does not work. I'm running a local environment that has OPTION request handling enabled.

I experienced this issue identically as a user above, where Axios.post(url, obj) returned the CORS 403 forbidden error, but updating that to Axios.post(url, JSON.stringify(obj)) worked correctly.

실제로 Axios 문제가 아니라 서버 문제였다면 OPTIONS 요청이 어느 쪽이든 실패했기 때문에 객체를 문자열화해도 아무런 영향을 미치지 않았을 것입니다.

@alexanderbanks

OPTION HTTP 메서드에 대해서는 확실하지 않지만 내 특정 문제는 내가 작성한 내부 API(내부 API는 여기에서 서버임)에 POST를 시도하는 React 클라이언트가 있다는 것입니다. 이 오류가 계속 발생했습니다: Failed to load resource: Origin http://localhost:7149 is not allowed by Access-Control-Allow-Origin. XMLHttpRequest cannot load http://localhost:8902/user-login due to access control checks.

Axios 문제일 수 있다고 생각하여 대신 Unirest를 시도했지만 동일한 오류가 계속 발생했습니다. 그래서 나는 그것이 다른 것이어야 한다고 생각했습니다. 이것이 브라우저 문제인지 React인지 확실하지 않지만 API 서버(Nodejs + Express API)에 다음을 추가하자마자 모든 것이 클라이언트 측에서 Axios와 Unirest 모두에서 작동하기 시작했습니다.

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

아마도 이 장면 뒤에서 실제로 일어나는 일에 대한 나의 이해는 다소 제한적일 수 있지만, 서버의 이 약간의 코드는 나를 위해 문제를 해결했습니다.

서버가 원본 액세스를 너무 많이 제한하지 않는지 확인하고 no-cor를 피하고 싶다면 다음을 시도하십시오.

    return axios(url, {
      method: 'POST',
      mode: 'no-cors',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      withCredentials: true,
      credentials: 'same-origin',
    }).then(response => {
    })

CORS가 작동하는 방식에 대해 혼란스러워하는 사람들이 있다고 생각합니다. 그러나 원래 문제는 CORS에 대한 것이 아니었으며 최소한 중요한 문제여야 합니다. 내 말은, CORS를 올바르게 구성했지만 Post가 작동하지 않는 경우 서버를 올바르게 구성하는 방법이 아니라 보고해야 할 문제입니다.

API가 이상하게 작동합니다. 모든 cors GET 요청이 "credentials : true"로 작동했습니다.
POST 요청의 경우 동일한 원본 요청이 데이터 개체를 문자열화하지 않고 작동하는 반면 CORS POST 요청의 경우 데이터 개체를 문자열화할 때 작업이 시작됩니다.

정확한 이유를 얻지 못했지만 문제가 해결되었습니다.

죄송하지만 같은 주제에 대해 서클을 하고 있는 것 같아서 이 스레드를 잠그고 있습니다. 다른 문제에서 다루지 않은 특정 문제가 있는 경우(잘못된 구성으로 인한 일반적인 CORS 문제, 양식 Urlencoded 대신 JSON으로 전송되는 POST 요청 등) 특정 세부 정보가 포함된 새 문제를 여십시오.