在进行前端 npm 项目的开发调试工作时,与后端实现数据交互是极为关键的环节。然而,在此过程中常常容易遭遇 CORS(跨源资源共享)跨域问题。通常而言,有以下两种行之有效的应对策略:
其一,是直接于服务端着手,对 CORS 头信息进行配置。借助在服务端的响应中精准设置诸如Access-Control-Allow-Origin
等一系列特定的 HTTP 头字段,能够详细指定允许访问的源、请求所使用的方法,以及可接受的请求头信息,从而确保浏览器在面对跨域请求时,仅放行那些符合预先设定规则的请求,顺利通过 CORS 校验环节。
其二,则是在前端项目内部设立代理。通过这一方式,可巧妙地将远程的 API 请求 “伪装” 成源自本地的 API 调用。如此一来,由于请求看似是从本地发起,便能够巧妙避开浏览器所实施的 CORS 跨域检查机制,进而实现与后端顺畅无阻的数据交互,为前端开发调试工作的高效推进扫除障碍。
本文着重讨论前端项目内部代理的设置方法。
npm vite 项目server proxy设置方法 vite.config.js
在项目根目录的 vite.config.js 文件中增加以下配置, 如果没有vite.config.js这个文件就创建一个
import { defineConfig } from 'vite';
export default defineConfig({
// 其他的配置省略....
server: {
proxy: {
'/api': {
target: 'http://192.168.2.8:8080',// 后端API服务地址
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''), // url重写,这个根据你自己的后端URL重写
},
'/ws': {
target: 'http://192.168.2.8:8081',// 后端ws服务地址
changeOrigin: true,
rewrite: (path) => path.replace(/^\/ws, '/websocket'), // url重写,这个根据你自己的后端URL重写
},
},
host: "0.0.0.0",
port: 3000, // 这个是当前本地前端项目的服务端口号
https: false, //
},
});
上面代码将当前项目的 /api请求转发到后端 http://192.168.2.8:8080
将当前项目的/ws 请求转发到后端的http://192.168.2.8:8081/websocket上面
Webpack 开发环境中的dev-server proxy设置 webpack.config.js
module.exports = {
// 其他常规配置项,如entry、output等
devServer: {
proxy: {
'/api': {
target: 'http://192.168.2.8:8080', // 替换为实际后端服务器地址
changeOrigin: true,
pathRewrite: {
'^/api': '' // 重写路径,去除前端请求中的/api前缀,适配后端实际路由
}
},
'/ws': {
target: 'http://192.168.2.8:8081', // 替换为实际后端服务器地址
changeOrigin: true,
pathRewrite: {
'^/ws': '/websocket' // 重写路径,将前端请求中的/ws前缀替换为后端的 /websocket ,以适配后端实际路由
}
}
}
}
};
uniapp项目的server proxy
如果是uniapp项目,我们一般只需要设置h5的项目的proxy即可, 可以使用上面2种方式的一种,或者直接在 manifest.json 文件 里面的h5节点配置h5的proxy即可, 如下所示
{
"h5": {
"devServer": {
"port": 8000, // 当前本地项目的服务端口号
"disableHostCheck": true,
"proxy": {
"/api": {
"target": "http://192.168.2.8:8080/", //目标接口域名
"changeOrigin": true, //是否跨域
"secure": true // 设置支持https协议的代理
},
"/ws": {
"target": "http://192.168.2.8:8080/", //目标接口域名
"changeOrigin": true, //是否跨域
"secure": true // 设置支持https协议的代理
}
}
},
"domain": "demo.localhost",
"publicPath": "./",
"title": "XXX小程序H5"
}
}
服务端的CORS处理参考
服务端的CORS处理就是在服务端响应客户端请求时设置以下的CORS请求头信息。 不同的语言设法方法有差异,但是设置的项目都是一样的。
CORS Header
- Access-Control-Allow-Origin: http://www.demo.com
- Access-Control-Max-Age:86400
- Access-Control-Allow-Methods:GET, POST, OPTIONS, PUT, DELETE
- Access-Control-Allow-Headers: content-type
- Access-Control-Allow-Credentials: true
含义解释:
CORS Header属性 | 解释 |
---|---|
Access-Control-Allow-Origin | 允许http://www.demo.com域(自行设置,这里只做示例)发起跨域请求 |
Access-Control-Max-Age | 设置在86400秒不需要再发送预校验请求 |
Access-Control-Allow-Methods | 设置允许跨域请求的方法 |
Access-Control-Allow-Headers | 允许跨域请求包含content-type |
Access-Control-Allow-Credentials | 设置允许Cookie |