浏览器的同源策略限制及解决方法

前言

浏览器的同源策略是一种安全机制，用于限制一个源（协议 + 域名 + 端口）的文档或者脚本如何能与另一个源的资源进行交互。同源策略限制了浏览器在向不同源发送请求时的行为，这意味着通过浏览器向不同源发送 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 请求时绕过浏览器的同源策略限制。这种方法能够有效地解决前后端分离开发中的跨域访问问题，提高开发效率和灵活性。