核心思路是前端请求同源本地代理（如localhost:3000），由其转发至目标接口（如https://api.example.com），绕过浏览器同源策略；webpack-dev-server中通过devServer.proxy配置，如'/api'代理到目标地址并启用changeOrigin和pathRewrite，前端直接请求'/api/users'即可。
用 Ajax 配合本地代理解决开发跨域，核心思路是让前端请求发给同源的本地服务（比如 localhost:3000），再由这个服务去转发请求到目标接口（比如 https://api.example.com），从而绕过浏览器的同源策略限制。这种方式不依赖后端改响应头，也不需要 JSONP 或 CORS 配置，特别适合开发阶段快速联调。
本地代理怎么配（以 webpack-dev-server 为例）
多数现代前端脚手架（如 Vue CLI、Create React App）底层都基于 webpack-dev-server，它内置了 proxy 功能。只需在开发服务器配置中添加代理规则：
- 在 vue.config.js（Vue 项目）或 setupProxy.js（CRA 项目）中写：
devServer: {
proxy: {
'/api': {
target: 'https://api.example.com',
changeOrigin: true,
pathRewrite: { '^/api': '' }
}
}
}
};
这样，前端发 /api/users 的 Ajax 请求，开发服务器会自动转给 https://api.example.com/users，且浏览器看到的是同源请求。
Ajax 请求要怎么写
前端代码里直接请求代理路径，不要写完整外部地址：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 错误写法：
fetch('https://api.example.com/users')→ 仍跨域 - 正确写法：
fetch('/api/users')→ 走本地代理 - 使用 Axios 时也一样：
axios.get('/api/posts')
注意：代理只在开发环境生效（即 npm run serve 或 npm start 时），构建生产包后需由 Nginx 或其他反向代理承接，不能直接用。
遇到 cookie 或登录态问题怎么办
如果目标接口依赖 Cookie（比如需要登录态），默认代理不会携带凭证。需显式开启：
- 在 proxy 配置中加
withCredentials: true - 前端 fetch 加
{ credentials: 'include' }，Axios 加withCredentials: true - 后端目标接口必须返回
Access-Control-Allow-Credentials: true（若用 CORS），但本地代理模式下这一步可省——因为请求已由本地服务发出，不受浏览器跨域限制
也就是说，只要代理配置了 changeOrigin: true 和 withCredentials: true，登录态就能透传过去。
没有脚手架时怎么搭简易代理
如果用纯 HTML + JS 开发，没用 webpack，可用 Node.js 快速起一个本地代理服务：
- 安装
http-proxy-middleware或用express+node-fetch - 写一个
proxy.js，监听localhost:8081，收到/api/**请求就转发到真实域名 - 前端 Ajax 请求地址设为
http://localhost:8081/api/xxx
这种手动代理灵活性高，适合轻量项目或学习调试，但不如脚手架集成方便。
