Vue.js에 대한 CORS 문제

Vue.js에 대한 CORS 문제

사용 중:

• Vue 2.0.3
• vue-interval 2.0.1
• vuex 0.8.2
• 값 리소스 0.7.0

그리고 로컬로 실행되는 API가 아닌 원격 API를 사용할 때 내 페이지에 로그인하려고 하면 다음과 같은 cors 오류가 발생합니다.

vue-resource.common.js?2f13:1074 OPTIONS 

https://mywebsite/api/auth/login 

(anonymous function) @     vue-resource.common.js?2f13:1074
Promise$1            @     vue-resource.common.js?2f13:681
xhrClient            @     vue-resource.common.js?2f13:1033
Client               @     vue-resource.common.js?2f13:1080
(anonymous function) @     vue-resource.common.js?2f13:1008


XMLHttpRequest cannot load https://mywebsite/api/auth/login. 
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested 
resource. Origin 'http://localhost:8080' is therefore not allowed 
access. The response had HTTP status code 415.

이제 저는 Azure에서 API를 실행하고 있으며, 포스트맨으로부터의 호출을 테스트할 수 있기 때문에 CORS 헤더가 백엔드에서 올바르게 설정되어 있다고 확신합니다.Vue와 프론트에 대해서는 잘 모르겠습니다.

구성 파일에 다음과 같은 상황이 있습니다.

export const API_ROOT = 'https://mywebsite/api/'
export const AuthResource = Vue.resource(API_ROOT + 'auth{/action}')

이 행동을 다음과 같이 부릅니다.

login: function (userData) {
    return AuthResource.save({action: 'login'}, userData)
}

마지막으로 vuex 서브모듈의 토큰을 통해 인증 로그인을 확인할 때 간단한 헤더 검사 상태가 있습니다.

var updateAuthHeaders = () => {
    var token = JSON.parse(localStorage.getItem("auth_token"))
    if (token != null){
        Vue.http.headers.common['Authorization'] = token
    }else{
        Vue.http.headers.common['Authorization'] = null
    }
}

추가해 보았습니다.Vue.http.headers.common['Access-Control-Allow-Origin'] = true여기, 하지만 사건에 도움이 되지 않았습니다.

감 잡히는 게 없어요?내가 뭘 잘못하고 있는 거지..로그인이 안 되면 다른 통화도 안 될 것 같습니다.

API URL과 클라이언트 URL이 동일하지 않을 때 이 오류가 발생합니다.Vue CLI 3(및 그 핵심인 Webpack)을 사용하면 API URL을 클라이언트 URL로 프록시할 수 있습니다.

에 안에.vue.config.js파일 다음 행 추가:

// vue.config.js
module.exports = {
  // options...
  devServer: {
        proxy: 'https://mywebsite/',
    }
}

전화를 전보게 냅다니화를그리에약스아나서.http://localhost/api/.

여기에서 전체 기사를 읽을 수 있습니다.Vue CLI 3에서 CORS 오류를 처리하는 방법은 무엇입니까?

서버가 다음을 전송하는지 확인합니다.Access-Control-Allow-Origin "*"표제의

2)Vue.http.headers.common['Access-Control-Allow-Origin'] = true,Vue.http.headers.common['Access-Control-Allow-Origin'] = '*'등은 고객 요청에 필요하지 않습니다.

3)Vue.http.options.emulateJSON = true이미 1점과 2점이 정상이지만 vue-resource가 실패하는 경우 도움이 됩니다.status 0을 제거하도록 노력하세요.Vue.http.options.credentials = true그리고.Vue.http.options.emulateHTTP = true.

이 가할수추있을 추가할 수 .Access-Control-Allow-Origin: *서버 응답(이 경우 IIS)에 응답하는 것이 좋습니다.

여기서 일어나는 일은 당신의 고객이http://localhost그리고 그것은 접속을 시도하고 있습니다.https://mywebsite/api/그 말은 그들이 같은 출신이 아니라는 것을 의미합니다.

추가하는 경우Access-Control-Allow-Origin: *당신은 전 세계가 당신의 API 끝점에 도달하도록 허용할 것입니다.

액세스 제어 서버 헤더를 만드는 것이 좋습니다.Access-Control-Allow-Origin: *.mysite "vhost"에 .localhost용할을 dev.mysite또는 그와 유사합니다.

이렇게 하면 "localhost"가 문제 없이 API에 액세스할 수 있습니다.

추할수있다니습을 추가할 수도 .localhost화이트리스트에 추가할 수 있습니다. 하지만 이것은 또한 자체적인 보안 문제가 없는 것도 아니며, 어쨌든 모든 곳에서 작동하지도 않습니다.

간단히 말해서 REST 서비스와 동일한 도메인에 있는 로컬 호스트의 vhost를 생성하면 문제가 해결됩니다.

라이브로 이동한 후에는 다음을 제거해야 합니다.*.mysite화이트리스트에서 가능한 한 특정 도메인을 분할하여 사용합니다.

행운을 빕니다.

IIS에서 CORS가 활성화되어 있지 않을 가능성이 높습니다.IIS의 응용 프로그램 루트 폴더에 있는 web.config 파일을 다음과 같이 수정하여 이 작업을 실행할 수 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
   <httpProtocol>
         <customHeaders>
           <add name="Access-Control-Allow-Origin" value="*" />
         </customHeaders>
   </httpProtocol>

</system.webServer>
</configuration>

참고: 이 방법을 사용하면 누구나 API 끝점에 도달할 수 있으므로 프로덕션 환경에서는 사용할 수 없고 개발 환경에서만 사용할 수 있습니다.

devServer 개체 내에서 프록시를 정의하는 데 필요한 vue.config.js 파일이 프로젝트 루트와 vue.config 파일 내부에 필요합니다.module.exports = { devServer: { proxy: 'https://exampledomain.com/api/'}};당신의 axios.post 내에서 당신은 이제 간단하게 요청할 수 있습니다.https://exampledomain.com/api/login

당신의 모든 API에 대한 응답에 이것들을 첨부하기만 하면 됩니다.

res.header('액세스-컨트롤-오리지널 허용','*');

res.header('액세스-제어-허용-메소드', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

res.header('액세스-제어-허용-헤더', 오리진, 내용-유형, X-요청됨-포함, 수락,'권한 부여';

언급URL : https://stackoverflow.com/questions/40863417/cors-issue-with-vue-js