使用vue-cli在开发环境中实现跨域步骤

一、前言

前端常见解决跨域的方法有
1、降域、
2、jsonp（只支持get方法）、
3、CORS（Cross-origin resource sharing--跨域资源共享）、
4、PostMessage（HTML5的API）、
5、location.hash方法、
6、window.name方法、
7、document.domain方法（需要主域相同）、
8、动态创建script
9、web sockets（需要服务器支持）

跨域方法汇总.png

总九种方法；具体解释，推荐看 前端解决跨域问题的8种方案（最新最全） 和 js同源策略、跨域、jsonp基础知识问答及 跨域资源共享 CORS 详解

二、正文

今天弄vue-cli时，遇到了跨域问题----想要获取

http://tingapi.ting.baidu.com/v1/restserver/ting?type=1&size=30&offset=0&method=baidu.ting.billboard.billList

返回的数据。直接使用跨域了，因此需要使用代理了：
介绍两种方法：

（一）、proxyTable法

1、在vue-cli项目文件中找到\config\index.js 中的proxyTable: {}，设置

    proxyTable: {
      '/v1': {
        target: 'http://tingapi.ting.baidu.com', //需要代理的网址
        changeOrigin: true,
        pathRewrite: {
          '^/v1': '/v1'
        }
      }
    },

2、在vue-cli项目中找到\src\App.vue 在某方法中添加如下代码：

this.$http.get("/v1/restserver/ting?type=1&size=30&offset=0&method=baidu.ting.billboard.billList")
.then(m=>console.log(m));

上面的$http 其实是我引入的axios -- 在 vue-cli项目文件中的/src/main.js 引入

import axios from 'axios'
Vue.prototype.$http = axios;

当然 不使用Vue.prototype.$http 直接 axios.get(xxxx) 也是可以的。

这样我们可以在浏览器中看到请求变成了

http://localhost:8080/v1/restserver/ting?type=1&size=30&offset=0&method=baidu.ting.billboard.billList

也就是实现了本地代理了，这样就不存在跨域了。

（二）、dev-server法

1、在vue-cli项目文件中找到\build\dev-server.js
2、按照我以前的一个项目 添加相应语句。这样在前端直接按照如下语句即可获得数据:

this.$http.get('/api/getSliderData').then(res => {    
console.log("耶！代理数据是。。。", res.data);        

三、跨域代理工具推荐

当然，如果你用的网站不支持后端添加配置，也不想使用上述vue-cli设置代理等，其实作为前端我们可以使用现成的跨域代理工具。今天发现了一个比较好的跨域代理工具： JsonBird ，
它的github地址：https://github.com/xCss/JsonBird
文档地址：https://github.com/xCss/JsonBird/wiki
例子地址：https://jsfiddle.net/LNing/duL5Lby7/
具体使用可详见相关介绍。

四、禁止浏览器检查跨域方法

Chrome浏览器如何开启Ajax跨域访问调试？

image.png

https://www.imooc.com/video/16577

五、其它推荐文章

1、Vue 开发调试阶段如何解决跨域?

2、简单设置，解决使用webpack前后端跨域发送cookie的问题

**本文版权归本人即笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *