Vue3解决前端跨域问题

在vue.config.js里添加代理

备注：例如vue想请求不在同一台服务器上的localhost:8080服务器的接口，在下面proxy里的target里写上要访问的服务器的前缀，然后写一个别名'/projectURL'，

 

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
        transpileDependencies: true,
        lintOnSave: false,//关闭语法检查

        // 基本路径
        publicPath: '/',
        // 输出文件目录
        outputDir: 'dist',
        configureWebpack: {
            externals: {}
        },
        devServer: {
            proxy: {
                '/projectURL': {
                    target: 'http://localhost:8080/',  //这里是后端接口的 IP+端口
                    ws: true,//代理websocked
                    changeOrigin: true,
                    secure: false, //target是否为https接口
                    pathRewrite: {
                        '^/projectURL': ''  //更改请求URL
                    }
                },
                '/otherUrl': {
                    target: 'https://××××××××.com/',  //请求对象
                    ws: true,//代理websocked
                    changeOrigin: true,
                    secure: true, //target是否为https接口
                    pathRewrite: {
                        '^/otherUrl': ''  //更改请求URL
                    }
                }
            }
        }
    }
)

然后在访问的页面写上：

import axios from "axios";
axios.defaults.baseURL = "/projectURL";

然后：请求时当前页面axios里不用在写访问的接口的IP了，axios.defaults.baseURL = "/projectURL";这里已经指定了当前访问的就是代理里定义的域名或者IP了

axios.get("/a/getUser", {})

          .then((response) => {

            console.log(response);

          });

 

如果部署到Nginx上请求后端接口报404 ，请看我另一篇文章

https://www.cnblogs.com/lwl80/p/16640842.html