前言
由于浏览器的限制,浏览器不允许向不同的域名发送请求。
目前解决方法有四个:
1前端配置正向代理服务器(本文使用vite配置)
https://cn.vitejs.dev/config/server-options.html#server-proxy
2后端配置反向代理服务器(比如使用nginx)
3后端配置运行跨域(比如express允许跨域配置
app.use(cors());
4使用jsonp,配置回调函数
<script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=success&name=silly&sge=20"></script>
<script>
function success(data){
console.log("获取到数据");
console.log(data)
}
</script>
只有第一种方式前端可以独立解决,后面三种方式都需要后端配合。
配置步骤
在src同级文件夹下新建.env.development与.env.production文件,为vite的环境变量。
# 只在指定模式(development)下加载
# base api, 只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理
VITE_BASE_API = '/api'
更改接口地址为相对地址
import axios from 'axios'
//更改接口地址为相对地址
const service = axios.create({
baseURL: import.meta.env.VITE_BASE_API,
timeout: 5000
})
// 请求拦截器
service.interceptors.request.use(
(config) => {
return config // 必须返回配置
},
(error) => {
return Promise.reject(error)
}
)
// 响应拦截器
service.interceptors.response.use(
(response) => {
const { success, message, data } = response.data
// 要根据success的成功与否决定下面的操作
if (success) {
return data
} else {
$message('warn', message)
// TODO:业务错误
return Promise.reject(new Error(message))
}
},
(error) => {
return Promise.reject(error)
}
)
export default service
在与src的同级文件夹下创建vite.config.js并配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path, { join } from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
// https://vitejs.dev/config/
export default defineConfig({
// 代理
server: {
proxy: {
// 代理所有 /api 的请求,该求情将被代理到 target 中
'/api': {
// 代理请求之后的请求地址(你的真实接口地址)
target: 'xxx',
// 跨域
changeOrigin: true
}
}
}
})
注意:一定要是相对,这样vite才会判断,最终会转发到目标地址(target地址)
重启服务(注意,一定要重启服务,vite配置文件才能生效)