npm前端代理和转发:
在后端服务开启的状态下,npm run build (生产环境)将前端打包成静态文件,和后端服务放在一起,即可直接调用,例如后端开启8888端口,在localhost:8888直接访问前端网页。
在后端服务开启的状态下,npm run sevre(开发环境)前端文件(js、html、vue等)仍在前端的域中,不被允许跨域交互(同源策略),如果要和后端数据交互,则需要中间端口进行代理和转发。
fetch.js 文件中写好前端的URL
let service = axios.create({ // 已经是一个promise 了 baseURL: ‘/‘, timeout: 30000 });
无论有无代理,访问时的URL会写为 /
在vue.config.js文件中,设置代理方式和无代理时的访问URL
module.exports = { // 修改的配置 // 将baseUrl: ‘/api‘,改为baseUrl: ‘/‘, baseUrl: ‘/static‘, devServer: { proxy: { ‘/‘: { target: ‘http://localhost:8888‘, changeOrigin: true, ws: true, // pathRewrite: { // ‘^/api‘: ‘‘ // } } } } }
无代理访问的URL:baseUrl
devServer:开发环境下的代理。当前端请求发送到中间端口时,请求将识别到包含 / 的url,并把请求转发到8888端口。
但是当后端开启多个服务时(8888和8889),前端代理就需要指明转发到不同的服务端口,那么代理就需要区分不同的URL。
实际上,所访问到的不同的url是在cgi部分指定的,例如定义了api和api2,分别要访问两个服务,则在devServer写为:
devServer: { proxy: { ‘/api‘: { target: ‘http://localhost:8888‘, changeOrigin: true, ws: true, pathRewrite: { ‘^/api‘: ‘‘ } }, ‘/api2‘: { target: ‘http://localhost:8889‘, changeOrigin: true, ws: true, pathRewrite: { ‘^/api2‘: ‘‘ } } } }
原文地址:https://www.cnblogs.com/AHappyBird/p/11743538.html
时间: 2024-10-12 08:09:59