VUE开发环境、生产环境的跨域解决方案

开发环境中的跨域问题

项目根目录下的vue.config.js中添加以下代码(如果没有该文件可以手动创建):

module.exports = {
  devServer: {
    disableHostCheck: true,
    proxy: {
      "/api": {
        changeOrigin: true,
        target: "http://127.0.0.1:8081",
        pathRewrite: {
          "^/api": "",
        },
      },
    },
  },
};

该代码对于项目中的请求地址中的/api开头的请求转发到http://127.0.0.1:8081/,如:

原访问链接:/api/test
转换后链接:http://127.0.0.1:8081/test

生产环境中的跨域问题

生产环境中,刚刚的文件是不生效的,我们需要通过nginx进行配置,在nginx中添加如下配置(包含history模式网址匹配):

    location / {
        try_files $uri $uri/ /index.html;  # url统一重定向到index.html
    }

    location ^~ /api/ {
        proxy_pass https://api.test.com/;
    }

该代码会将请求中的/api转换为https://api.test.com/,如:

原访问链接:/api/test
转换后链接:https://api.test.com/test

results matching ""

    No results matching ""