[vue] vue cli 4.0+ 解决前端跨域问题

彩蛋：后台管理系统一站式平台模板

vue-next-admin，这是基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex，适配手机、平板、pc 的后台开源免费模板库

文档链接：axios、vue-cli、开源社区api
自己动手测试：（黑窗）
1.1 vue create ‘项目名称’
1.2 vue serve ‘xxx.vue’
1.3 完整的接口链接为：http://meiriyikan.cn/api/json.php

一、request.js（去 axios中看）

请注意这句话：const baseURL = '/api'：这话是使用 /api 代替 vue.config.js中配置的 proxy target要访问的跨域的接口域名。比如你写成 const baseURL = 'http://meiriyikan.cn', 那将完成不了跨域操作。

import axios from 'axios'

const baseURL = `/api`

const service = axios.create({
	baseURL: baseURL,
	timeout: 100000,
	headers: {
		'Content-Type': 'application/json',
	}
})

// 添加请求拦截器
service.interceptors.request.use(config => {
	// 在发送请求之前做些什么 token
	// if (sessionStorage.getItem('token')) {
	// 	config.headers.common['Authorization'] = `${sessionStorage.getItem('token')}`
	// }
	return config;
}, error => {
	// 对请求错误做些什么
	return Promise.reject(error);
});

// 添加响应拦截器
service.interceptors.response.use(response => {
	// 对响应数据做点什么
	return response;
}, error => {
	// 对响应错误做点什么
	return Promise.reject(error);
});

export default service;

二、随便一个xxx.js文件，里面内容如下

请注意 url: '/json.php' 这句话：这里不写成url: '/api/json.php'是因为 vue.config.js的 proxy 配置成了target: 'http://meiriyikan.cn/api', 自己可灵活取舍。

import request from '@/utils/request'

// 一个集新闻，图片，文章，句子的接口
export function getArticle(param) {
	return request({
		url: '/json.php',
		method: 'post',
		data: param
	})
}

三、vue.config.js文件

module.exports = {
	devServer: {
		open: true, // 自动打开浏览器
		host: '0.0.0.0', // 真机模拟，使用
		port: '8080', // 前台代理端口号
		https: false, // https： {type: Booleam}
		hotOnly: false, // 热更新
		proxy: {
			'/api': {
				target: 'http://meiriyikan.cn/api', // 要访问的跨域的域名
				ws: true, // 如果要代理websockets
				changeOrigin: true, // 开启代理
				pathRewrite: { // 路径重写
					'^/api': '' // 使用 `/api` 代替 `target` 要访问的跨域的域名
				}
			}
		}
	}
}

四、随便一个xxx.vue文件

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { getArticle } from '@/api/demo.js';

@Component({})
export default class Home extends Vue {
	mounted() {
		this.init();
	}
	init() {
		let param = {
			apikey: 'd0058f79caae5300dcba65f128e52855',
			name: 'peakchao',
			passwd: '123456'
		};
		getArticle({ ...param }).then(res => {
			console.log(res);
		});
	}
}
</script>

注意看请求，变成了如下：http://localhost:8080/api/json.php 说明成功

五、总结

1、其实不难，需要在vue.config.js中配置 proxy 代理。每次改变 vue.config.js时，最好重新npm run serve 一下，要不可能会有玄学出现。
2、没配置过多条跨域的请求，因为目前未在项目中遇到。
3、个人觉得，跨域找后台就完事了，不需要前端整得花里胡哨的。