Vue移动端框架Mint UI教程-接口跨域问题（七）

原创

祈澈菇凉 2022-04-24 00:20:04 ©著作权

文章标签 移动端 json 数据 文章分类 前端开发

©著作权归作者所有：来自51CTO博客作者祈澈菇凉的原创作品，请联系作者获取转载授权，否则将追究法律责任

自己写了一个json数据，放在服务器上，现在要通过vue项目调用数据

http://www.intmote.com/test.json

Vue移动端框架Mint UI教程-接口跨域问题（七）_数据

我现在要调用

在调用接口数据的时候的时候

会出现这样的报错

Access to XMLHttpRequest at 'http://www.intmote.com/test.json' from origin
'http://localhost:8080' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

Vue移动端框架Mint UI教程-接口跨域问题（七）_数据_02

这个时候，是遇到了跨域的问题；由于接口跨域问题，因此不能直接通过ajax请求访问

查看自己的代码，直接把json接口写在请求里

Vue移动端框架Mint UI教程-接口跨域问题（七）_数据_03

图片.png

解决办法：设置代理，利用proxyTable属性实现跨域请求

1：打开build/webpack.dev.conf.js，配置代理proxyTable属性如下：通过vue-cli提供给的代理（proxy）进行配置即可，

proxyTable: {
  '/api': {
    target: 'http://www.intmote.com',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''  
    }
  }
},

Vue移动端框架Mint UI教程-接口跨域问题（七）_数据_04

图片.png

2：回到当前页面,我的页面是my.vue,修改请求路径

created() {
            this.$http.get('/api/test.json').then((response) => {

                console.log(response.data)
                //响应正确回调
                this.nameList = response.body; //把数据存放到data中
            })
        },

Vue移动端框架Mint UI教程-接口跨域问题（七）_json_05