浏览器的同源策略限制及解决方法
前言
浏览器的同源策略是一种安全机制,用于限制一个源(协议 + 域名 + 端口)的文档或者脚本如何能与另一个源的资源进行交互。同源策略限制了浏览器在向不同源发送请求时的行为,这意味着通过浏览器向不同源发送 AJAX 请求会失败。
步骤1:使用代理解决跨域问题
1.步骤1
utils/request.js代码如下:
import axios from 'axios';
// 设置基本请求地址
const baseURL='/api';
// 创建 Axios 实例
const instance=axios.create({baseURL})
// 添加响应拦截器
instance.interceptors.response.use(
result=>{
// 对响应数据进行处理,这里返回响应数据的 data 部分
return result.data;},
err=>{
// 对响应错误进行处理,弹出异常提示,并将 Promise 的状态置为 rejected
alert('服务异常');
return Promise.reject(err)
})
// 导出创建的 Axios 实例
export default instance;
2.步骤
src/vite.config.js代码如下:
server: {
proxy: {
'/api': {
//获取路径中包含了/api的请求
target:'http://localhost:8080', // 后端服务的地址
changeOrigin: true,//修改地址
rewrite: (path) =>path.replace(/^\/api/,'') // 重写请求路径,将 /api 开头的请求去掉 /api
上述配置的含义是,当前端项目发起请求时,如果请求路径以 /api 开头,就将请求代理到 http://localhost:8080 地址。这样,前端项目在访问 /api 下的接口时,实际上是通过代理访问后端服务。
结论
通过使用代理来解决跨域问题,可以使前端项目在向不同源发送 AJAX 请求时绕过浏览器的同源策略限制。这种方法能够有效地解决前后端分离开发中的跨域访问问题,提高开发效率和灵活性。