vue 跨域 解决方法

要想到代理这个方面

一个项目需要介入第三方接口是必然产生跨域方面问题 此刻就要配置代理

vue2中 在vue.config.js 文件中的server下, vue3中安装的是vite就在vite.config.js 文件中的server下

配置的属性基本相同

找到文件后配置相对应的属性 值

import { defineConfig } from 'vite'

export default defineConfig({
    server: {
        // port: 4000, // 设置服务启动端口号
        // open: true, // 设置服务启动时是否自动打开浏览器
        cors: true, // 允许跨域
        // 设置代理，根据我们项目实际情况配置
        proxy: {
            '^/api': { //api是自行设置的请求前缀，按照这个来匹配请求，有这个字段的请求，就会进到代理来
                target: "http://apis.juhe.cn/",//是自己需要调的接口的前缀域名
                changeOrigin: true, //是否跨域
                //设置非https请求
                secure: false,
                rewrite: (path) => path.replace(/^\/api/, '') //重写匹配的字段，如果不需要放在请求路径上，可以重写为""
            }
        }
    }

})

1. port 服务启动端号可以随意 只要不重复

2. open 设置服务启动时是否自动打开浏览器

3. cors 是否允许跨域

此刻vite.config.js文件已配置好

接下来就是 在你需要接入接口的页面在接口前输入/api 就完成当前接口的调用

当vite.config.js文件配置好 遇到开头为/api的借口就会自动截获代理的域名

接口调用成功