vue解决跨域问题

╰半夏微凉° 2024-04-18 08:51 66阅读 0赞

这两天有朋友用vue写页面遇到了跨域问题（其实是后台的问题），但是在局域网下也得把数据调过来，我在这里简单总结两种方法吧，希望对大家有帮助。  
跨域问题的报错是下面这样的：  
![在这里插入图片描述][20190904111011209.png]

## 第一种办法：用vue-resource ##

输入指令

npm install vue-resource --save

然后在main.js文件引入

import VueResource from 'vue-resource'
    Vue.use(VueResource)

接下来在需要的vue单文件组件里调接口就可以了，会用到jsonp格式，写以下的代码

this.$http.jsonp('https://192.168.0.188：8081/api/Values', {},{headers: {},emulateJSON: true })
          .then((res) => {
             console.log(res);
          })
          .catch(function(err){
             console.log(err)
          })

这种办法，可以在控制台打开network，看看调用返回的内容，状态码是200就说明调用成功

## 第二种方法：用第三方接口proxyTable ##

1 在config目录下index.js文件中设置proxyTable

proxyTable: {
          '/v1': {
            target: 'https://api.douban.com',
            changeOrigin: true,   //设置允许跨域
            pathRewrite: {
              // /v1将代表target/v1 
              '^/v1': '/v1'
            }
          }
        }

2 因为在新版的vue-cli的package.json中webpack-dev-server没有设置–open,所以打开package.json文件在”scripts”属性中的”dev”属性中手动添加–open，如下代码所示

"scripts": {
        "dev": "webpack-dev-server --open --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "build": "node build/build.js"
      },

3 在需要的vue的单文件组件里调用就行

axios
            .get(
              "/v1/getServiceInfo?xxxxxx"
            )
            .then(res => {
              console.log(res.data)
            })

[20190904111011209.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/373bd010495443dbbe68833de0b790df.png