跨域
是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制。
vite 跨域代理
把对某一段 URL 的访问直接转换成另一个真实的后端 API 地址,这样前后端就视为使用了相同的域名、协议和端口,就避免了跨域的问题,还能避免繁琐的反复编写域名
server.proxy 为开发服务器配置自定义代理规则
export default defineConfig({
server: {
proxy: {
// 字符串简写写法
'/foo': 'http://localhost:4567',
// 选项写法
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
},
// 正则表达式写法
'^/fallback/.*': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/fallback/, '')
},
// 使用 proxy 实例
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
configure: (proxy, options) => {
// proxy 是 'http-proxy' 的实例
}
},
// Proxying websockets or socket.io
'/socket.io': {
target: 'ws://localhost:3000',
ws: true
}
}
}
})
上面是官方给出的设置代理的几种方式,对于初学者来说,可能理解的不是很深刻;
这里我直接用我的项目实例来掩饰一下;我的项目用的是axios
export default defineConfig({
plugins: [vue()],
//解决“vite use `--host` to expose”
server: {
host: '0.0.0.0',
// port: 8080,
open: true,
proxy: {
"/neimenmenhuan": { //服务器接口路径地址,根据路径设置
target: "http://xxx.xx.x.xx:8080", //你的服务器地址
changeOrigin: true, // 允许跨域
rewrite: (path) => path.replace(/^\/neimenmenhuan/), // 重写路径把路径变成空字符,(我理解的意思是:baseURL: '/neimenmenhuan/' 配置了,子接口 url: 'neimenmenhuan/settings/qx/user' 也可以正常访问,但是理解的很粗略,希望得到一个透彻的答案;
},
},
},
};
axios 文件
import axios from 'axios'
// 创建一个 axios 实例
const service = axios.create({
baseURL: '/neimenmenhuan/', // 所有的请求地址前缀部分
timeout: 60000, // 请求超时时间毫秒
headers: {
// 设置后端需要的传参类型
'Content-Type':'application/json;charset=UTF-8'
},
})
子接口模块
import httpRequest from '@/axios/index'
// 获取用户信息
export function apiGetUserInfo(param) {
return httpRequest({
url: 'neimenmenhuan/settings/qx/user/sendNM.do',
method: 'post',
data: param
})
}
然后页面导入使用,就可以解决跨域问题啦