开发者社区> 落雨_> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

轻松解决vuejs跨域

简介: Vuejs跨域问题实战 有时候,本地使用webpack开启一个node的dev端口,项目中使用vuejs去访问别人家的api,比如豆瓣或者其他的api,不使用jsonp肯定就会报跨域的问题。 如何让我们调用别人家的api就像是调用自己家的一样呢?答案就是利用自己的后台去访问这个api,然后转发到自己的前端,但是这么搞,岂不是很麻烦,有没有简单的傻瓜式插件可以替我们做这个操作呢?我们用一下代理的思路proxy来解决这个问题。
+关注继续查看

Vuejs跨域问题实战

有时候,本地使用webpack开启一个node的dev端口,项目中使用vuejs去访问别人家的api,比如豆瓣或者其他的api,不使用jsonp肯定就会报跨域的问题。

img_eff7e3aed076ed39ded1d2decc007873.png

如何让我们调用别人家的api就像是调用自己家的一样呢?答案就是利用自己的后台去访问这个api,然后转发到自己的前端,但是这么搞,岂不是很麻烦,有没有简单的傻瓜式插件可以替我们做这个操作呢?我们用一下代理的思路proxy来解决这个问题。

其实nodejs有一个httpProxy的组件,正好webpack也支持,那么我们看看如何使用httpProxy,自动的监听vue想要get的某些网站api的请求,自动利用后台去访问api,拿到返回结果,返回给vue。

1.最近使用了http-proxy-middleware! https://www.npmjs.com/package/http-proxy-middleware插件之后,访问别人家的api就像是自己家的一样。

//node的index.js
var proxyMiddleware = require('http-proxy-middleware')
//拦截一切/api的请求,后台代理获取数据,返回到前端
var proxyTable = {
      '/api': {
        target: 'http://xxx.com/v4/',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api'
        }
      }
    };
Object.keys(proxyTable).forEach(function (context) {
  var options = proxyTable[context]
  if (typeof options === 'string') {
    options = { target: options }
  }
  app.use(proxyMiddleware(context, options))
})

//vue

export default {
        data() {
            return {
                list:[]
            }
        },

        ready() {
            this.getBanner();
        },

        methods: {
            //请求别人家的api获取列表 /api/xxxx 会被proxy,绕过跨域
            getBanner() {
                const self = this self.$http.get(';/api/xxxx/home';, {
                    _t: new Date().getTime()
                }).then(response = >{
                    let data = response.data
                    //数据对象
                    let json = data.data
                    if (data.status === 0) {
                        self.list = json.list
                    }
                },
                (response) = >{
                    console.log(response)
                })
            }
        },
        components: {

        }
 }

记得提前安装模块:npm install -D http-proxy-middleware

2.或者使用jsonp

参考:https://aotu.io/notes/2016/10/13/vue2/

mounted: function() {
    this.$http.jsonp('https://api.douban.com/v2/movie/top250?count=10', {}, {
        headers: {
        },
        emulateJSON: true
    }).then(function(response) {
        // 这里是处理正确的回调
        this.articles = response.data.subjects
        // this.articles = response.data["subjects"] 也可以
    }, function(response) {
        // 这里是处理错误的回调
        console.log(response)
    });
}
  1. // 不加跨域xhr会发起options请求
    Vue.http.options.headers={
    'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'
    };
    // post的时候会把JSON对象转成formdata
    Vue.http.options.emulateJSON=true;

4.nodejs 解除跨域限制:

app.all('*', function(req, res, next) {

res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
next();

});
  1. proxyTable参考:http://div.io/topic/1825
    https://segmentfault.com/a/1190000007231750

落雨
http://www.cnblogs.com/ae6623/p/6124229.html
http:js-dev.cn

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
搭建vue开发环境步骤
相信很多人在刚开始学习vue这个框架的时候,在最开始搭建开发环境的时候,都会遇到一些大大小小的坑,我之前在学习的时候搭建过一次,过了一个月后在搭建第二次的时候,竟然有一些混乱,所以今天想整理出来
63 0
总结-使用CORS解决跨域问题(下)
对前端来说跨域应该是不陌生的,解决跨域的方案有很多种。而我司前端接口调用也正是CORS的方式,所以难免在联调阶段会遇见一些CORS跨域的问题,下面通过一个简单的demo验证一下CORS解决跨域的过程中,对一些不清楚的知识点做一个简单的总结
62 0
使用V8和node轻松profile分析nodejs应用程序
使用V8和node轻松profile分析nodejs应用程序
101 0
Vue + Nodejs + Express 解决跨域的问题
Vue + Nodejs + Express 解决跨域的问题
175 0
nodejs作为前后端分离中间件的跨域解决方案
前后端分离时候SEO问题很头疼,上次提供了nuxt+axios解决服务端渲染问题的解决方案,其实nodejs一样可以做服务端渲染,这时候会产生ajax跨域问题,本文旨在nodejs中跨域问题 其实很简单,像其他的服务端程序一样,在http请求中处理下头信息即可。
1057 0
+关注
落雨_
http://js-dev.cn
文章
问答
文章排行榜
最热
最新
相关电子书
更多
利用编译将 Vue 组件转成 React 组件
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载