Vue移动端框架Mint UI接口跨域问题

￡神魔★判官ぃ 2022-12-05 10:21 189阅读 0赞

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

http://www.intmote.com/test.json  
![7c8bd8080ba30dd51a78abd600947325.png][]

我现在要调用

在调用接口数据的时候的时候  
会出现这样的报错

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.

![8eadc791f10c62adb43c64cac8603ef2.png][]

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

查看自己的代码，直接把json接口写在请求里  
![图片.png][.png]

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

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

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

![图片.png][.png 1]

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

created() {
    			this.$http.get('/api/test.json').then((response) => {
    
    				console.log(response.data)
    				//响应正确回调
    				this.nameList = response.body; //把数据存放到data中
    			})
    		},

![a1c7c2ea5cc603f3c9f75d591a7e9d18.png][]

3：重新启动项目

![f11863f10ac5c869d345ce1435c1941f.png][]  
4：这个时候可以看到，跨域问题解决  
json里面的数据也显示在了页面里面

![9e60829312a8999310161209c0e4ef25.png][]

github访问链接：https://github.com/wangxiaoting666/mint-demo

\#\#\#\#Mint UI教程汇总：  
Vue移动端框架Mint UI教程-搭建环境引入框架（一）  
https://www.jianshu.com/p/874e5152b3c5  
Vue移动端框架Mint UI教程-底部导航栏（二）  
https://www.jianshu.com/p/56e887cbb660  
Vue移动端框架Mint UI教程-组件的使用（三）  
https://www.jianshu.com/p/5ec1e2d2f652  
Vue移动端框架Mint UI教程-跳转新页面(四)  
https://www.jianshu.com/p/364d0462ddb6  
Vue移动端框架Mint UI教程-调用模拟json数据(五)  
https://www.jianshu.com/p/6d3f1436b327  
Vue移动端框架Mint UI教程-数据渲染到页面（六）  
https://www.jianshu.com/p/dc532ab82d2a  
Vue移动端框架Mint UI教程-接口跨域问题（七）  
https://www.jianshu.com/p/b28cd8290b2a

--------------------

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]

[7c8bd8080ba30dd51a78abd600947325.png]: /images/20221123/7d9a631a814946159e19c6bdc08e5a49.png
[8eadc791f10c62adb43c64cac8603ef2.png]: /images/20221123/a61d19b2e8174455a53f0eabdb47d26d.png
[.png]: /images/20221123/ccf21fca614a42858b22beee3bd28a5e.png
[.png 1]: /images/20221123/a61e4978c1cf41f2ac7840e8f536c1fa.png
[a1c7c2ea5cc603f3c9f75d591a7e9d18.png]: /images/20221123/071d710219df4293886792a66722ebb9.png
[f11863f10ac5c869d345ce1435c1941f.png]: /images/20221123/317a76ddca534205a45c5c92e087641f.png
[9e60829312a8999310161209c0e4ef25.png]: /images/20221123/9b812675614e411e80298227baadeb72.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/27d8a41d0a4b478aa92f974778adb880.png