关于本地vue项目跨域的解决方案

当我们在本地开发vue项目的时候，在对接后端接口会存在跨域问题，这时候可以采用以下方法去解决本地请求接口跨域的问题。

1、在 vue.config.js 文件里配置devServer代理跨域请求

'use strict'

const { defineConfig } = require("@vue/cli-service");
const path = require('path');
const port = process.env.port || 5528;
const name = "vue demo";
const webpack = require('webpack')


function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = defineConfig({
	transpileDependencies: true,
	publicPath: process.env.PublicPath, // PublicPath
	outputDir: process.env.OutputDir,
	assetsDir: 'static',
	lintOnSave: false,
	productionSourceMap: false,
	filenameHashing: true,
	parallel: false,

	devServer: {
		host: '0.0.0.0',
		port: port,
		open: false,
		// overlay: {
		// 	warnings: false,
		// 	errors: true
		// },
		https: true,
		proxy: {
			'/api': { // '/api'是代理标识，用于告诉node，url前面是/api的就是使用代理的
				target: process.env.VUE_APP_URL, //目标地址，一般是指后台服务器地址
				changeOrigin: true, //是否跨域
				pathRewrite: { // pathRewrite 的作用是把实际Request Url中的'/api'用""代替
					'^/api': ""
				}
			}
		}
	},

	configureWebpack: {

		resolve: {
			alias: {
				'@': resolve('src'),
				zyModelsFace$: path.resolve(__dirname, "./zy-models-face.min.js")
			}
		},

		plugins: [
          new webpack.ProvidePlugin({
            zyModelsFace: 'zyModelsFace'
          })
        ],
	},


	chainWebpack: config => {
		// 一个规则里的 基础Loader
		// svg是个基础loader
		// const svgRule = config.module.rule('svg');

		// // 清除已有的所有 loader
		// // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
		// svgRule.uses.clear()

		// // 添加要替换的 loader
		// svgRule
		//     .use('svg-sprite-loader')
		//     .loader('svg-sprite-loader')
		//     .options({
		//         symbolId: 'icon-[name]'
		//     })

		// config.module
		// 	.rule("worker")
		// 	.test(/\.worker\.js$/)
		// 	.use("worker-loader")
		// 	.loader("worker-loader")
		// 	.options({
		// 			inline: "fallback"
		// 	});
		// config.module.rule("js").exclude.add(/\.worker\.js$/);
	}

})

2、如果是mac系统，可以在 chrome 浏览器开启允许跨域设置

新建一个 MyChromeDevUserData 文件夹，在文件夹右键开启一个终端，输入以下命令，这时候会自动弹出一个可以跨域请求的浏览器窗口界面

open -n /Applications/Google\ Chrome.app/ --args --disable-web-security  --user-data-dir=/Users/用户名称/Documents/MyChromeDevUserData

--disable-web-security 关闭同源策略

根据电脑不同需要改的是--user-data-dir后面的路径