vue项目中，前端与后台进行数据请求或者提交的时候，如果后台没有设置跨域，前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' header is present on the requested resource.” 这种跨域错误。
要想本地正常的调试，解决的办法有三个：
一、后台更改header
1header('Access-Control-Allow-Origin:*');//允许所有来源访问 2header('Access-Control-Allow-Method:POST,GET');//允许访问的方式
这样就可以跨域请求数据了。
二、使用JQuery提供的jsonp (注：vue中引入jquery，自行百度)
1methods: { 2 getData () { 3 var self = this 4 $.ajax({ 5 url: 'http://f.apiplus.cn/bj11x5.json', 6 type: 'GET', 7 dataType: 'JSONP', 8 success: function (res) { 9 self.data = res.data.slice(0, 3) 10 self.opencode = res.data[0].opencode.split(',') 11 } 12 }) 13 } 14}
通过这种方法也可以解决跨域的问题。
三、使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建）
例如请求的url:“/business/remind/user”
1、打开vue.config.js.js,在proxy中添写如下代码：
1// 运行配置 2 devServer: { 3 port: '9527', //代理端口 4 open: false, //项目启动时是否自动打开浏览器，我这里设置为false,不打开，true表示打开 5 proxy: { 6 '/api': { 7 target: process.env.VUE_APP_HTTP_URL, 8 changeOrigin: true, //是否跨域 9 pathRewrite: { //重写路径 10 '^/api': '/' // 或 者 'http://localhost:8080/api' 11 } 12 // 既然我们设置了代理，则所有请求url都已写成/api/xxx/xxx，那请求如何知道我们到底请求的是哪个服务器的数据呢 13 // 因此这里的意义在于， 以 /api开头的url请求，代理都会知道实际上应该请求那里， 14 // ‘我是服务器/api’，后面的/api根据实际请求地址决定，即我的请求url：/api/test/test，被代理后请求的则是 15 // https://我是服务器/api/test/test 16 } 17 } 18 },
附带vue.config.js下的代码
1const chalk = require('chalk') 2const path = require('path'); 3function resolve (dir) { 4 return path.join(__dirname, dir) 5 6} 7module.exports = { 8 // 没有书写outputDir属性 默认'dist' 对应dev.assetsSubDirectory 9 outputDir: 'dist', 10 // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only 11 // compiler: false, 12 //在vue-cli.3.3版本后 baseUrl被废除了，因此这边要写成 publicPath ( 资源地址 ) 13 publicPath: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_PUBLICPATH : '/' , 14 // css相关配置 15 css: { 16 // 是否使用css分离插件 ExtractTextPlugin 17 extract: true, 18 // 开启 CSS source maps? 19 sourceMap: false, 20 // css预设器配置项 21 loaderOptions: {} 22 // 启用 CSS modules for all css / pre-processor files. 23 // modules: false 24 }, 25 // 运行配置 26 devServer: { 27 port: '8222', //代理端口 28 open: false, //项目启动时是否自动打开浏览器，我这里设置为false,不打开，true表示打开 29 proxy: { 30 '/api': { 31 target: process.env.VUE_APP_HTTP_URL, 32 changeOrigin: true, //是否跨域 33 pathRewrite: { //重写路径 34 '^/api': '/' // 或 者 'http://localhost:8080/api' 35 } 36 // 既然我们设置了代理，则所有请求url都已写成/api/xxx/xxx，那请求如何知道我们到底请求的是哪个服务器的数据呢 37 // 因此这里的意义在于， 以 /api开头的url请求，代理都会知道实际上应该请求那里， 38 // ‘我是服务器/api’，后面的/api根据实际请求地址决定，即我的请求url：/api/test/test，被代理后请求的则是 39 // https://我是服务器/api/test/test 40 } 41 } 42 }, 43 chainWebpack: config => { 44 // 提示输出的哪个地址 45 console.log(chalk.blueBright('\n\n running ' + process.env.VUE_APP_PROJ_NAME + ' : ') + 46 chalk.yellowBright(process.env.VUE_APP_HTTP_URL + ' please wait... \n')); 47 // 判断不同环境 做相应处理 48 if(process.env.NODE_ENV === 'production') { 49 // 测试生产环境, 不压缩js代码 50 if (process.env.VUE_APP_TITLE === 'alpha') { 51 config.optimization.minimize(false) 52 } 53 } 54 //set第一个参数：设置的别名，第二个参数：设置的路径 55 config.resolve.alias 56 .set('@',resolve('./src')) 57 .set('components',resolve('./src/components')) 58 .set('assets',resolve('./src/assets')) 59 .set('views',resolve('./src/views')) 60 .set('network',resolve('./src/network')) 61 //注意 store 和 router 没必要配置 62 63 config.plugin('html') 64 .tap(args => { 65 args[0].title = '公募综合业务平台' 66 return args 67 }) 68 } 69}
本文转自 https://www.jianshu.com/p/c3f92a904696，如有侵权，请联系删除。