Proxy `changeOrigin` setting doesn't seem to work

Question

I'm using Vue CLI 3.0.0 (rc.10) and am running two servers (backend server and WDS) side by side.

I followed the devServer.proxy instructions on the Vue CLI documentation to add a proxy option to my vue.config.js. I also followed the instructions for the http-proxy-middleware library to supplement the options:

module.exports = {
  lintOnSave: true,
  outputDir: '../priv/static/',
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:4000',
        changeOrigin: true,
        ws: true,
      },
    },
  },
}; 

My understanding is that the changeOrigin: true option needs to dynamically change the Origin header on the request to "http://localhost:4000". However, requests from my app are still being sent from http://localhost:8080 and they trigger CORS blockage:

Request URL: http://localhost:4000/api/form
Request Method: OPTIONS
Status Code: 404 Not Found
Remote Address: 127.0.0.1:4000
Host: localhost:4000
Origin: http://localhost:8080 <-- PROBLEM

What am I doing wrong?

Answer 1

I was having basically the same problem, and what finally worked for me was manually overwriting the Origin header, like this:

module.exports = {
  lintOnSave: true,
  outputDir: '../priv/static/',
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:4000',
        changeOrigin: true,
        ws: true,
        onProxyReq: function(request) {
          request.setHeader("origin", "http://localhost:4000");
        },
      },
    },
  },
}; 

Answer 2

this is my vue.config.js, work fine for me:

module.exports = {
    baseUrl: './',
    assetsDir: 'static',
    productionSourceMap: false,
    configureWebpack: {
        devServer: {
            headers: { "Access-Control-Allow-Origin": "*" }
        }
    },
    devServer: {
        proxy: {
            '/api': {
                target: 'http://127.0.0.1:3333/api/',
                changeOrigin: false,
                secure: false,
                pathRewrite: {
                    '^/api': ''
                },
                onProxyReq: function (request) {
                    request.setHeader("origin", "http://127.0.0.1:3333");
                }
            }
        }
    }
}

axios.config.js:

import axios from 'axios';
import { Message, Loading } from 'element-ui'

// axios.defaults.baseURL = "http://127.0.0.1:3333/";


axios.defaults.timeout = 5 * 1000

// axios.defaults.withCredentials = true

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

let loading = null;

function startLoading() {
    loading = Loading.service({
        lock: true,
        text: 'loading....',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.8)'
    })
}

function endLoading() {
    loading.close()
}

axios.interceptors.request.use(
    (confing) => {
        startLoading()

        // if (localStorage.eToken) {
        //     confing.headers.Authorization = localStorage.eToken
        // }
        return confing
    },
    (error) => {
        console.log("request error: ", error)
        return Promise.reject(error)
    }
)


axios.interceptors.response.use(
    (response) => {
        endLoading()
        return response.data;
    },
    (error) => {

        console.log("response error: ", error);

        endLoading()


        return Promise.reject(error)
    }
)


export const postRequest = (url, params) => {
    return axios({
        method: 'post',
        url: url,
        data: params,
        transformRequest: [function (data) {
            let ret = ''
            for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
            }
            return ret
        }],
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    });
}


export const uploadFileRequest = (url, params) => {
    return axios({
        method: 'post',
        url: url,
        data: params,
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    });
}

export const getRequest = (url) => {
    return axios({
        method: 'get',
        url: url
    });
}


export const putRequest = (url, params) => {
    return axios({
        method: 'put',
        url: url,
        data: params,
        transformRequest: [function (data) {
            let ret = ''
            for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
            }
            return ret
        }],
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    });
}

export const deleteRequest = (url) => {
    return axios({
        method: 'delete',
        url: url
    });
}

api request:

import {postRequest} from "../http";

const category = {
    store(params) {
        return postRequest("/api/admin/category", params);
    }
}

export default category;

the principle:

Answer 3

According to https://github.com/chimurai/http-proxy-middleware#http-proxy-options, a header option works for me.

    devServer: {
        proxy: {
            '/api': {
                target: 'http://127.0.0.1:3333/api/',
                headers: {
                    origin: "http://127.0.0.1:3333"
                }
            }
        }
    }

Answer 4

changeOrigin only changes the host header!!!

see the documents http-proxy-middleware#http-proxy-options

option.changeOrigin: true/false, Default: false - changes the origin of the host header to the target URL