JavaScript 中怎么配置开发服务器代理解决本地开发跨域问题-js教程-PHP中文网

代理通过开发服务器（如vite）作为中间人，将前端对同源地址（如/api/user）的请求转发至后端（如localhost:8090），再将响应返回，使浏览器全程仅与同源地址通信，从而绕过同源策略限制。

javascript 中怎么配置开发服务器代理解决本地开发跨域问题

开发时用本地服务器（比如 localhost:5173）调后端接口（比如 localhost:8090），浏览器因同源策略会拦截响应——但请求其实已发出去、后端也返回了数据，只是浏览器没交给前端代码。代理就是让开发服务器当“中间人”，把请求悄悄转给后端，再把结果原样传回来，前端全程只跟自己同源的地址通信，自然不跨域。

Vue CLI 项目（vue.config.js）

适用于 Vue 2 或基于 webpack 的 Vue 3 项目。在项目根目录创建或修改 vue.config.js：

配置单路径代理（推荐初学者）：
module.exports = { devServer: { proxy: 'http://localhost:8090' } };
所有以 / 开头的非静态资源请求（如 /api/user）都会被转发到 http://localhost:8090
配置多路径+精细控制（常用）：
proxy: { '/api': { target: 'http://localhost:8090', changeOrigin: true, pathRewrite: { '^/api': '' } } }
访问 /api/user 时，实际请求 http://localhost:8090/user；changeOrigin: true 确保后端收到的 Host 头是目标地址，避免 404

Vite 项目（vite.config.js）

Vue 3 + Vite 项目使用此方式。修改 vite.config.js 中的 server.proxy：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

基础写法：
proxy: { '/api': { target: 'http://localhost:8090', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } }
支持多个代理规则，例如同时代理 /api 和 /upload：
只需在 proxy 对象里加另一条键值对，如 '/upload': { target: 'http://localhost:8091', changeOrigin: true }

代理生效的关键点

光配代理还不够，前端代码必须配合才能真正走通：

Axios 请求 baseURL 要设为 / 或 ''（即相对路径），不能写死后端地址，例如：
axios.get('/api/user') ✅，axios.get('http://localhost:8090/api/user') ❌
确保开发服务器已重启：改完配置后需重新运行 npm run dev，否则代理不生效
检查 Network 面板：请求 URL 显示为 http://localhost:5173/api/xxx，且状态码是 200（不是预检失败或 500），说明代理已接管