外部浏览器解决跨域

最新推荐文章于 2023-02-07 15:34:37 发布

原创最新推荐文章于 2023-02-07 15:34:37 发布 · 653 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了在Vue项目中如何通过创建vue.config.js文件并设置devServer的proxy选项来解决跨域问题。示例展示了针对/api和/juhe前缀的请求，分别代理到Douyu和Juhe API，确保H5环境下正常运行。

外部浏览器解决跨域
项目的根目录中, 创建 vue.config.js

// vue.config.js
module.exports = {
	devServer:{
		proxy:{
			// 所有请求的开头是 /api 的, 自动代理成 target 指定的路径
			'/api':{
				target: 'https://m.douyu.com/api',
				pathRewrite: {
					// 默认: 例如  /api/room/list, 代理会转化为: 
					// ${target}/api/room/list
					// https://m.douyu.com/api/api/room/list
					'^/api':'' ,// 把开头的 /api 替换成 "
					// ${target}/room/list
					// https://m.douyu.com/api/room/list
				}
			},
			'/juhe':{
				target: 'http://apis.juhe.cn',
				pathRewrite:{
					'^/juhe':''
				},
				// 非https接口, 即 非安全的
				secure: false
			}
		}
	}
}

data中的请求地址如图：

export default {
	data() {
		return {
			more:'more',
			// 1. 带有跨域限定: 采用内置浏览器访问
			// 条件编译: 是注释格式
			// #ifdef H5
			href: '/api/room/list', //代理检测到: /api 开头的请求
			// #endif
			
			// 如果 不是h5 
			// #ifndef H5
			href: 'https://m.douyu.com/api/room/list',
			// #endif			
			data: null
		};
	},
｝