不凡说 / 文章详情

怎么在vue脚手架中解决跨域

2020-01-19 15:46 1302

什么是跨域

​ 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,是由浏览器同源策略限制的一类请求场景。

​ 同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。

跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议,端口,域名。只要这个3个中有一个不同就是跨域。 这里列举一个经典的列子:

#协议跨域
http://a.baidu.com访问https://a.baidu.com;
#端口跨域
http://a.baidu.com:8080访问http://a.baidu.com:80;
#域名跨域
http://a.baidu.com访问http://b.baidu.com;

比如请求简书的api

https://www.jianshu.com/

this.$ajax.get("https://www.jianshu.com/asimov/trending/now?count=15&note_ids=")

.then(res => {

	console.log(res)

})

就会报跨域问题 但如果就想请求他的接口呢

这个时候就可以使用vue脚手架提供的devServer.proxy配置反向代理

注意反向代理只适用与本地开发 生产环境不适用

比如需要访问的接口为简书的接口:

https://www.jianshu.com/asimov/trending/now?count=15&note_ids=

  • 找到项目根目录下的vue.config.js 如果没有则创建

  • 单一反向代理

    缺点是如果项目当中需要代理多个不同的域名的话就做不到

    //vue.config.js 里面的内容
    module.exports = {
        devServer: { // 通过webpack默认安装的webpack-dev-server开启本地服务器
            proxy: "https://www.jianshu.com" // 你需要代理的地址
        }
    }
    
    • 在项目里面安装axios
    cnpm install axios --save
    
    • 愉快的开发
    // 引入axios 
    import axios from "axios"
    
    created () {
    	
      axios.get("/asimov/trending/now?count=15&note_ids=") // 当请求接口的时候就不需要加上服务器地址
    	// 实际访问的地址是https://www.jianshu.com/asimov/trending/now?count=15&note_ids=
      .then(res => {
    
       console.log(res)
    
      })
    
     }
    
  • 多个反向代理

    需要代理多个地址

    需要把proxy改成key/value的方式

    key为你定义的路径名称 value为你的配置

    复制下面的代码到vue.config.js 里面

    下面的代码你只需要修改一处地方 就是target 要访问的接口域名

module.exports = {
	devServer: { // 通过webpack默认安装的webpack-dev-server开启本地服务器
        proxy: { // 使用本地服务器的反向代理 
          '/api': { // 定义的路径名称 当代理遇到以/api的时候怎么处理
            target: 'https://www.jianshu.com', // 要访问的接口域名  简书
            ws: true, // 是否启用websockets
            changeOrigin: true, // 开启代理:在本地会创建一个虚拟服务端,
            // 然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
            pathRewrite: {
              '^/api': ''  //通过pathRewrite重写地址,将前缀/api转为/
            }
          },
          '/beida': { // 定义的路径名称 当代理遇到以/api的时候怎么处理
            target: 'https://www.pku.edu.cn', // 要访问的接口域名 北大的官网
            ws: true, // 是否启用websockets
            changeOrigin: true, // 开启代理:在本地会创建一个虚拟服务端,
            // 然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
            pathRewrite: {
              '^/beida': ''  //通过pathRewrite重写地址,将前缀/api转为/
            }
          }
        }
    }
}
  • 设置完成之后使用axios获取数据

    // 引入axios 
    import axios from "axios"
    created () {
    
       axios.get("/beida/dat/hotTopics.json")// 获取北大官网的数据
    
       .then(res =>{
    
    ​    console.log(res)
    
       })
    
     }