Vue vue.config.js 프록시 404

질문

Vue JS 2 자습서 # 32-HTTP 요청 의 자습서를 vue-resource를 jsonplaceholder.typicode.com 으로 보냅니다. 프록시하지 않으면 CORS 오류가 발생합니다.

vue.config.js :

module.exports = {
  devServer: {
    proxy: {
      '^/api': {
        target: 'https://jsonplaceholder.typicode.com',
        ws: true,
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
}

HTTP 게시 요청 :

this.$http.post('/api/posts', {
    userId: 1,
    title: this.blog.title,
    body: this.blog.content,
}).then(function (data) {
  console.log(data)
});

오류:

XHR POST http://localhost:8080/api/posts [HTTP/1.1 404 Not Found 3ms]

나는 시도하였습니다 :

• Vue.js-vue.config의 프록시 .js가 무시됩니다

• https://cli.vue.js.org/config/#devserver-프록시

• Vue 프록시 설정이 작동하지 않음

• axios 및 vue-resource

편집 :

• '/ api / post'를 '/ api / posts'로 변경했지만 여전히 작동하지 않습니다.

• '/ api / posts'를 'https://jsonplaceholder.typicode.com/posts'로 변경하려고 시도하여 CORS 오류가 발생했습니다.

• vue.config.json 프록시에 pathRewrite : { '^ / api': ''} 를 추가했지만 여전히 작동하지 않습니다.

• 프록시 changeOrigin 설정이 작동하지 않는 것 같습니다 시도했지만 여전히 작동하지 않습니다.

답변1

공격하려는 실제 서버 대신 로컬 호스트로 이동하면 요청이 표시됩니다. this. $ http.post ( '/ api / post', {를 로 변경해 보셨습니까?) this. $ http.post ( 'https://jsonplaceholder.typicode.com/api/post', {

vuecli의 Document에서 볼 수 있듯이 서버를 프록시한다는 사실은 요청에 대해 해당 서버의 URL 작성을 중지해야 함을 의미하지 않습니다.

 

 

 

 

출처 : https://stackoverflow.com/questions/63422362/vue-vue-config-js-proxy-404