Question

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

我跟随the devServer.proxy instructions on the Vue CLI documentation向我的vue.config.js添加了代理选项。我还遵循the instructions for the http-proxy-middleware library来补充选项：

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

我遇到了基本相同的问题，最终对我有用的是手动覆盖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");
        },
      },
    },
  },
};

Answer 2

这是我的vue.config.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.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请求：

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

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

export default category;

原理：

Answer 3

changeOrigin 只更改 host 标头！！！

查看文档http-proxy-middleware#http-proxy-options

<块引用>

option.changeOrigin: true/false, Default: false - 将主机头的来源更改为目标 URL

代理服务器“ changeOrigin”设置似乎无效

3 个答案: