总结:
- 首先发起的请求地址应该是本地ip地址发起的请求
- 然后借由proxy将本地服务请求反向代理到正确的域名地址上
vue3+vite项目跨域配置
vite官方网址
根目录vite.config.js上配置
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import dns from 'dns'
// 重要
dns.setDefaultResultOrder('verbatim')
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), vueJsx()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
// 跨域配置
server: {
proxy: {
'/api': {
target: 'https://blog.csdn.net/', //你要跨域访问的网址
changeOrigin: true, // 允许跨域
// 带选项写法:http://localhost:5173/api/bar -> http://jsonplaceholder.typicode.com/bar
rewrite: (path) => path.replace(/^\/api/, '')
}
},
}
})
vue2,uniapp项目跨域配置
首先在cmd中查到自己ip地址
项目请求域名换成自己的ip,例如:http://110.11.0.110:8080/user
然后在vue.config.js
文件里设置
module.exports = {
devServer: {
https: false,
host: '110.11.0.110', // 本地地址
port: 8080, // 本地端口
disableHostCheck: true,
proxy: {
// 发起的所有接口
'/': {
// 正确的服务器域名,最后的/带不带取决于api里面带没带/
target: 'https://blog.csdn.net/',
changeOrigin: true, //表示确定代理
secure: false,
}
},
},
}