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

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

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

我现在要调用

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

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.

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

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

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

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

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

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

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

3：重新启动项目

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

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

Vue移动端框架Mint UI接口跨域问题相关推荐

Vue移动端框架Mint UI教程-调用模拟json数据(五)
1:安装 npm install vue-resource 2:打开main.js 注册 import VueResource from 'vue-resource' Vue.use(VueResou ...
vue 移动端跳转页面_Vue移动端框架Mint UI教程-跳转新页面(四)
前三节写了vue的移动端框架的入门篇章,今天接着写,今天写的教程其实很简单,在之前的基础上,新建一个界面,并且进行跳转新页面. 1:首先,在pages底下新建一个新的页面fa.vue 在页面里面写一些 ...
【移动端vue ui框架学习】vue项目如何使用基于vue的UI框架mint ui
看了下饿了么团队开发的PC端vue ui框架Element ui之后,顺便看了看同团队开发的移动端的vue ui框架mint ui,那么在vue项目中应该如何使用mint ui呢?以下做简单的记录. ...
Vue PC端框架和Vue移动端UI框架
Vue PC端框架和Vue移动端UI框架在学习Vue的过程之中,我发现不管是 BAT 大厂,还是创业公司,Vue 都有着广泛的应用,而且框架层出不穷,学习文档也越来越多,Vue也越来越受欢迎.下面是 ...
服务端api用php写还是用node,如何使用node搭建服务器,写接口,调接口,跨域
这次给大家带来如何使用node搭建服务器,写接口,调接口,跨域,使用node搭建服务器,写接口,调接口,跨域的注意事项有哪些,下面就是实战案例,一起来看一下.. 服务端项目目录下: 1.npm ini ...
Vue项目中你是如何解决跨域的呢？
Vue项目中你是如何解决跨域的呢? 一.跨域是什么跨域本质是浏览器基于同源策略的一种安全手段同源策略(Sameoriginpolicy),是一种约定,它是浏览器最核心也最基本的安全功能所谓同源( ...
写服务器node实际项目,基于node搭建服务器,写接口,调接口,跨域的实例
刚开始学node,今天做这个也是累死宝宝了,以后可以自己写接口自己用了,再也不用麻烦人家后台人员了,这些年我们欠他们的太多了,说多了都是泪,不多说,往下看吧... 服务端项目目录下: 1.npm in ...
【springboot】【若依(ruoyi)】@RestController 接口跨域请求
前言 springboot 2.1.1.RELEASE 360极速浏览器 12.0.1476.0 (正式版本) (32 位) jquery 3.5.0 接口跨域请求有两者方式: jsonp CORS ...
Nodejs之解决接口跨域问题
Node系列文章第一章:Node.js与内置模块(fs文件系统.path路径模块.http服务器模块) 第二章:Nodejs模块化(npm与包.开发自己的包.模块加载机制) 第三章:Nodejs之E ...

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

Vue移动端框架Mint UI接口跨域问题相关推荐

最新文章

热门文章