关于本地vue项目跨域的解决方案
新建一个MyChromeDevUserData文件夹,在文件夹右键开启一个终端,输入以下命令,这时候会自动弹出一个可以跨域请求的浏览器窗口界面。当我们在本地开发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
后面的路径
更多推荐
已为社区贡献5条内容
所有评论(0)