代理'changeOrigin'设置似乎不起作用

Question

我正在使用Vue CLI 3.0。0（rc.10）和am并排运行两个服务器（后端服务器和WDS）。

我跟踪了devServer。Vue CLI文档中的代理说明，用于将代理选项添加到我的Vue。配置。js。我还按照http代理中间件库的说明补充了以下选项：

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

我的理解是，changeOrigin:true选项需要动态地将请求上的Origin头更改为“http://localhost:4000“。但是，来自我的应用程序的请求仍从发送http://localhost:8080 它们会触发CORS阻塞：

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

我做错了什么？

Answer 1

changeOrigin仅更改主机的标题！！！

请参阅文档http代理中间件#http代理选项

选项changeOrigin:true/false，默认值：false-将主机头的原点更改为目标URL

Answer 2

这是我的vue。配置。js，对我来说很好：

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。配置。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请求：

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

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

export default category;

原则：

Answer 3

我遇到了基本相同的问题，最终对我有效的方法是手动覆盖Origin标题，如下所示：

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");
        },
      },
    },
  },
};