通过代理获取URL返回403错误

Question

With the goal of avoiding all the CORS headaches, I setup my vue cli to proxy the API call through webpack:

config/index.js

proxyTable: {
  '/api': {
    target: 'https://remote',
    changeOrigin: true,
    '^/api': '/api'
  }
},

Visiting the URL directly in browser works, for example: http://localhost:8080/api/events

However, if I try to fetch the url with axios, I get a 403 error: Error: "Request failed with status code 403"

Unfortunately the only reference I could find is this open issue .

In my case, it doesn't work in Firefox or Chrome.

This is a vue-cli 2 project, axios 0.18.0 , vue 2.5.2, webpack 3.6.0 , webpack-dev-server 2.9.1`

Answer 1

Ah I see, in case it benefits anyone, for some reason, setting my API url as localhost was not working:

.env

API_URL=//localhost:8080/api

But the following works:

.env

API_URL=//127.0.0.1:8080/api