位置: IT常识 - 正文

Vue跨域解决方法(vue跨域的几种方式)

编辑：rootadmin

Vue跨域解决方法

推荐整理分享Vue跨域解决方法(vue跨域的几种方式)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue 跨域解决,vue中怎么解决跨域问题,vue中如何解决跨域,vue中如何解决跨域,vue 跨域解决,vue解决跨域的几种办法,vue中如何解决跨域,vue中如何解决跨域,内容如对您有帮助，希望把文章链接给更多的朋友！

vue项目中，前端与后台进行数据请求或者提交的时候，如果后台没有设置跨域，前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' header is present on the requested resource.” 这种跨域错误。

要想本地正常的调试，解决的办法有三个：

一、后台更改header

header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

这样就可以跨域请求数据了

二、使用JQuery提供的jsonp (注：vue中引入jquery，自行百度)

methods: { getData () { var self = this $.ajax({ url: 'http://f.apiplus.cn/bj11x5.json', type: 'GET', dataType: 'JSONP', success: function (res) { self.data = res.data.slice(0, 3) self.opencode = res.data[0].opencode.split(',') } }) } }

通过这种方法也可以解决跨域的问题。

三、使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建）

例如请求的url:“/business/remind/user” 1、打开vue.config.js.js,在proxy中添写如下代码：

// 运行配置 devServer: { port: '9527', //代理端口 open: false, //项目启动时是否自动打开浏览器，我这里设置为false,不打开，true表示打开 proxy: { '/api': { target: process.env.VUE_APP_HTTP_URL, changeOrigin: true, //是否跨域 pathRewrite: { //重写路径 '^/api': '/' // 或者 'http://localhost:8080/api' } // 既然我们设置了代理，则所有请求url都已写成/api/xxx/xxx，那请求如何知道我们到底请求的是哪个服务器的数据呢 // 因此这里的意义在于，以 /api开头的url请求，代理都会知道实际上应该请求那里， // ‘我是服务器/api’，后面的/api根据实际请求地址决定，即我的请求url：/api/test/test，被代理后请求的则是 // https://我是服务器/api/test/test } } },

附带vue.config.js下的代码

const chalk = require('chalk') const path = require('path'); function resolve (dir) { return path.join(__dirname, dir)

} module.exports = { // 没有书写outputDir属性默认'dist' 对应dev.assetsSubDirectory outputDir: 'dist', // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only // compiler: false, //在vue-cli.3.3版本后 baseUrl被废除了，因此这边要写成 publicPath ( 资源地址 ) publicPath: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_PUBLICPATH : '/' , // css相关配置 css: { // 是否使用css分离插件 ExtractTextPlugin extract: true, // 开启 CSS source maps? sourceMap: false, // css预设器配置项 loaderOptions: {} // 启用 CSS modules for all css / pre-processor files. // modules: false }, // 运行配置 devServer: { port: '8222', //代理端口 open: false, //项目启动时是否自动打开浏览器，我这里设置为false,不打开，true表示打开 proxy: { '/api': { target: process.env.VUE_APP_HTTP_URL, changeOrigin: true, //是否跨域 pathRewrite: { //重写路径 '^/api': '/' // 或者 'http://localhost:8080/api' } // 既然我们设置了代理，则所有请求url都已写成/api/xxx/xxx，那请求如何知道我们到底请求的是哪个服务器的数据呢 // 因此这里的意义在于，以 /api开头的url请求，代理都会知道实际上应该请求那里， // ‘我是服务器/api’，后面的/api根据实际请求地址决定，即我的请求url：/api/test/test，被代理后请求的则是 // https://我是服务器/api/test/test } } }, chainWebpack: config => { // 提示输出的哪个地址 console.log(chalk.blueBright('\n\n running ' + process.env.VUE_APP_PROJ_NAME + ' : ') + chalk.yellowBright(process.env.VUE_APP_HTTP_URL + ' please wait... \n')); // 判断不同环境做相应处理 if(process.env.NODE_ENV === 'production') { // 测试生产环境, 不压缩js代码 if (process.env.VUE_APP_TITLE === 'alpha') { config.optimization.minimize(false) } } //set第一个参数：设置的别名，第二个参数：设置的路径 config.resolve.alias .set('@',resolve('./src')) .set('components',resolve('./src/components')) .set('assets',resolve('./src/assets')) .set('views',resolve('./src/views')) .set('network',resolve('./src/network')) //注意 store 和 router 没必要配置