【前端培训】怎么在vue脚手架中解决跨域-不凡学院

什么是跨域

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

同源策略/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)

   })

 }

【前端培训-知识点】怎么在vue脚手架中解决跨域

什么是跨域

其他文章