http를 사용하여 VUE의 CORS 문제를 해결하려면 어떻게 해야 합니까?

http를 사용하여 VUE의 CORS 문제를 해결하려면 어떻게 해야 합니까?

저는 Sails + Vue를 사용하여 프로젝트를 작성했으며, Github에서 프로젝트를 공유할 것입니다.

난 코르스에 문제가 있어

backend()에서 보안 코드는 다음과 같습니다.

module.exports.security = {
   cors: {
      allRoutes: true,
      allowOrigins: '*',
      allowCredentials: false,
   },
   csrf: false

};

프런트 엔드(vue)에서 라이브러리 액시스를 확장하고 http를 만듭니다.

import axios from 'axios';

export const HTTP = axios.create({
    baseURL: `http://localhost:1337`,
    headers: {
       'Access-Control-Allow-Origin': '*',
       'Access-Control-Allow-Methods': 'GET,HEAD,OPTIONS,POST,PUT',
       'Authorization': `Bearer ${localStorage.getItem('token')}`,
       'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept, Authorization',
    }
})

그리고 a는 http in 요청을 사용한다.

import {HTTP} from './http-common';

export default {
   post (user) {
      return HTTP.post('/api/v1/entrance/signup', user)
      .then((response) => Promise.resolve(response))
      .catch((error) => Promise.reject(error))
   }
}

그래서 저는 포스트 유저에서 HTTP를 사용하고 있습니다.CORS에 문제가 있습니다.하지만 저는 post User에서 악시를 사용하고 있기 때문에 CORS에는 문제가 없습니다.코드:

import axios from 'axios';

export default {
  post (user) {
    return axios.post('http://localhost:1337/api/v1/entrance/signup', user)
    .then((response) => Promise.resolve(response))
    .catch((error) => Promise.reject(error))
  }
}

저는 그 문제를 해결하기 위한 제안을 원합니다.감사합니다 여러분

흔한 문제입니다.클라이언트는 포트 8080에서 실행되고 서버는 포트 1337에서 실행되고 있습니다.이것들은 다른 도메인으로 간주됩니다.

저는 보통 클라이언트 측에서 프록시를 사용하여 서버에 대한 모든 요청을 프록시하도록 조언합니다.이것은 특히 Sails.js 세션이 쿠키와 함께 작동하기 때문에 유용합니다.Web pack DevServer 를 사용하고 있는 경우는, 셋업이 간단합니다.다음은 DevServers 문서(프록시)에 대한 링크입니다.

---

이 도메인 설정에서 계속 CORS를 수정하려면 서버 측에서 수정해야 합니다.Sails.js 응용 프로그램에서 root을 클릭하여 편집합니다.config/security.js거기서, 코멘트 아웃 되어 있는 CORS 설정을 확인할 수 있습니다.다음과 같이 표시됩니다.

  // cors: {
  //   allRoutes: false,
  //   allowOrigins: '*',
  //   allowCredentials: false,
  // },

다음과 같이 클라이언트 로컬 호스트 도메인을 허용하도록 변경합니다.

  cors: {
    allRoutes: true,
    allowOrigins: ['http://localhost:8080']
  },

클라이언트측 변경을 되돌릴 수 있습니다.

추가가 필요할 수 있습니다.withCredentials옵션이 없으면 브라우저는 쿠키를 보내지 않습니다.

axios.get('some api url', {withCredentials: true});

언급URL : https://stackoverflow.com/questions/61854812/how-can-i-resolve-problem-cors-in-vue-using-http