Vue2怎么解决跨域问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue2怎么解决跨域问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.跨域报错：

vue2跨域,前端,javascript,开发语言

项目目录：

vue2跨域,前端,javascript,开发语言

第一步：在vue项目中的跟目录下创建一个 vue.config.js ，文件名是固定的，名字不一样会报错，如果有这个文件就不用新建

第二步: 在vue.config.js里边直接复制粘贴下面这串代码：

 devServer: {
        host:'0.0.0.0', //可以忽略不写
        port: 8080,//它是用来修改你打开后的端口号的
        open: true,//值为 true的话，项目启动时自动打开到浏览器里边， false不会打开
        proxy:{
            '/api':{
                target:'http://m.sirfang.com/api',//跨域请求的公共地址
                ws:false, //也可以忽略不写，不写也不会影响跨域
                changeOrigin:true, //是否开启跨域，值为 true 就是开启， false 不开启
                pathRewrite:{
                    '^/api':''//注册全局路径， 但是在你请求的时候前面需要加上 /api  
                }
            }
        }
    },

粘贴后，vue.config.js代码如下：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    host: '0.0.0.0', //可以忽略不写
    port: 8080, //它是用来修改你打开后的端口号的
    open: true, //值为 true的话，项目启动时自动打开到浏览器里边， false不会打开
    proxy: {
      '/api': {
        target: 'http://localhost:8089', //跨域请求的公共地址
        ws: false, //也可以忽略不写，不写不会影响跨域
        changeOrigin: true, //是否开启跨域，值为 true 就是开启， false 不开启
        pathRewrite: {
          '^/api': '' //注册全局路径， 但是在你请求的时候前面需要加上 /api
        }
      }
    }
  }
})

第三步：如果你使用的是axios来请求数据的话，需要先下载 axios 包，它分为全局引入和局部引入，全局是在 main.js 里边引，这里我们用的全局引入，不会的小伙伴可以去搜一搜，这里不做讲解。

打开main.js进行全局引入：

import axios from 'axios'

Vue.prototype.$http = axios

第四步：在组件中用axios进行请求数据:

    async axiosPost() {
      const { data: res } = await this.$http({
        url: '/api/userm/we',
        method: 'post',
        params: {
          name: 'admin01',
          password: 'password'
        }
      })
      console.log(res)
    }

完成以上一些，就可以实现跨域了，宝贝们快去试试吧！！！😘文章来源地址https://www.toymoban.com/news/detail-520124.html

到了这里，关于Vue2怎么解决跨域问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！