npm uniapp前端项目开发模式CORS跨越问题解决方法- vite server proxy代理vite.config.js / webpack.config.js dev-server配置方法

在进行前端 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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值