浏览器的同源策略限制,向不同源(不同协议、不同域名、不同端口)发送ajax请求会失败,由于发起ajax请求的域为http://localhost:5173,而后台服务器的域为http://localhost:8080
所以浏览器会限制该请求的发送, 这种问题称为跨域问题, 跨域问题可以在服务器端解决,也可以在浏览器端解决
1、前端解决跨域
通过配置代理的方式解决:
在request.js中定义一个变量记录为公共的前缀(/api),会把当前 前端源和/api拼接成新的url:http://localhost:5173/api。
之后vie.config.js中的proxy配置代理会检测请求路径是否有/api字符,有 就会将请求的域名和端口(源)替换成target中的内容【一般只需要修改target中成自己的内容】,rewrite会将路径重写,把/api替换成“”,最后组成的请求url为:http://localhost:8080。
(1)request.js中配置统一前缀 /api
//定制请求的实例
//导入axios npm install axios
import axios from 'axios';
//定义一个变量,记录公共的前缀 , baseURL
const baseURL = '/api';
const instance = axios.create({baseURL})
//添加响应拦截器
instance.interceptors.response.use(
result=>{
return result.data;
},
err=>{
alert('服务异常');
return Promise.reject(err);//异步的状态转化成失败的状态
}
)
export default instance;
(2)vie.config.js中配置代理
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
// 服务配置
server: {
//配置代理
proxy: {
'/api': {
target: 'http://localhost:8080', // 后端服务器地址
changeOrigin: true, // 是否改变请求域名
rewrite: (path) => path.replace(/^\/api/, '')//将原有请求路径中的api替换为''
}
}
}
})
2、后端解决跨域
通过CORS解决跨域:
官网地址:https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
-
CORS的全称为Cross-origin Resource Sharing,中文含义是跨域资源共享,
-
CORS 是跨域的一种解决方案,CORS 给了web服务器一种权限:服务器可以选择是否允许跨域请求访问到它们的资源。
方案一: 在IndexController上添加@CrossOrigin注解
@RestController
@RequestMapping(value = "/admin/system/index")
@CrossOrigin(allowCredentials = "true" , originPatterns = "*" , allowedHeaders = "*")
public class IndexController {
}
弊端:每一个controller类上都来添加这样的一个接口影响开发效率、维护性较差
方案二:添加一个配置类配置跨域请求(推荐)
@Component
public class WebMvcConfiguration implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**") // 添加路径规则
.allowCredentials(true) // 是否允许在跨域的情况下传递Cookie
.allowedOriginPatterns("*") // 允许请求来源的域规则
.allowedMethods("*")
.allowedHeaders("*") ; // 允许所有的请求头
}
}
3、微服务网关解决跨域
在application.yaml中加上:
globalcors:
cors-configurations:
'[/**]':
allowedOriginPatterns: "*"
# 允许请求中携带的头信息
allowedHeaders: "*"
# 运行跨域的请求方式
allowedMethods: "*"
# 跨域检测的有效期,单位s
maxAge: 36000