前端跨域问题可通过五种方法解决：一、启动chrome时禁用同源策略；二、安装cors扩展；三、配置开发服务器代理；四、调整fetch请求避免预检；五、使用--unsafely-treat-insecure-origin-as-secure参数。
如果您在前端开发过程中遇到浏览器阻止跨域请求的问题，可能是由于同源策略限制了不同源之间的资源访问。以下是实现跨域访问的多种配置方法：
一、启动浏览器时禁用同源策略
该方法适用于本地开发调试，通过命令行参数临时关闭浏览器的安全限制，使页面可自由发起跨域请求。
1、关闭当前所有 Chrome 浏览器进程。
2、在终端或命令提示符中执行以下命令启动 Chrome：
macOS： open -n -a "Google Chrome" --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security
Windows： chrome.exe --user-data-dir="C:/ChromeDevSession" --disable-web-security
Linux： google-chrome --user-data-dir=/tmp/chrome_dev_test --disable-web-security
二、使用浏览器扩展启用跨域代理
借助已签名的浏览器插件，在不修改代码或服务端配置的前提下，为指定请求注入 CORS 头或重写响应头。
1、打开 Chrome 网上应用店，搜索并安装 CORS Unblocked 或 Allow CORS: Access-Control-Allow-Origin。
2、点击浏览器右上角扩展图标，启用该插件开关。
3、在插件设置中将模式切换为 Enable CORS，并确认其状态显示为激活。
三、配置本地开发服务器代理
通过前端构建工具（如 Webpack Dev Server、Vite）内置的代理功能，将前端请求转发至目标后端服务，从而规避浏览器同源检查。
1、若使用 Vite，在 vite.config.ts 中添加 proxy 配置：
proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true } }
2、若使用 Create React App，在 package.json 中添加 "proxy": "http://localhost:3000" 字段。
3、重启开发服务器，确保前端请求路径以 /api 开头，即可被自动代理。
四、修改 Fetch 请求配置绕过预检限制
部分简单跨域请求（如 GET/POST 且 Content-Type 为 text/plain、application/x-www-form-urlencoded、multipart/form-data）可避免触发预检（preflight），降低被拦截概率。
1、在 JavaScript 中发起请求时，避免设置自定义 headers（如 X-Requested-With）。
2、确保请求 method 为 GET 或 POST，且 body 格式为表单数据或纯文本。
3、不调用 fetch(...).then(res => res.json()) 前检查响应状态，防止因解析失败引发隐式异常干扰调试。
五、启用 Chrome 的 --unsafely-treat-insecure-origin-as-secure 参数
当需在 localhost 上测试 HTTPS 接口但证书不可信时，该参数可将特定 HTTP 源视为安全上下文，支持调用需安全上下文的 API（如 Service Worker、Geolocation）。
1、确保目标地址为 http://localhost:8080 类本地地址。
2、启动 Chrome 时附加参数：--unsafely-treat-insecure-origin-as-secure="http://localhost:8080" --user-data-dir=/tmp/unsafe。
3、访问该地址后，检查地址栏左侧是否显示 “不安全”提示消失且锁形图标变为灰色，表示安全上下文已生效。
