前端常用的跨域解决方案

前端常用的跨域解决方案

跨域是浏览器为了安全而做出的限制策略。
浏览器请求必须遵循同源策略：同域名、同端口、同协议。
【三种解决方式】：
1、CORS跨域； 2、JSONP跨域； 3、代理跨域。（最安排的，别人看不到你原接口得地址）

一.CORS跨域：（主要修改后端代码实现）
服务端设置，前端直接调用（说明：后台允许前端某个站点进行访问）

Response Headers中：
Access-Control-Allow-Credentials:true 如后端取不到你的Cookie，前端发请求时一定要设置这个选项为true。
Access-Control-Allow-Origin：http://localhost:8080 此设置可允许前端跨域。

二.jsonp跨域：前台适配，后台配合

1. npm i jsonp --save-dev 下载jsonp
2. 导入 import jsonp from ‘jsonp’

<script>
import jsonp from 'jsonp';
export default {
  data(){
    return{
      data:''
    }
  },
  mounted()
  {
    let url = 'https://www.imooc.com/search/hotwords';
    jsonp(url,(err,res)=>{
      let result = res;//res接收接口信息
      this.data = result
    })
  }
}
</script>

--------------------------------------------------------------------------------------------------
需要注意的是：

1. cors请求，默认是任何人都可以请求，如果后端做了设置就可以做到只允许一些站点可以访问
2. jsonp，是没有任何限制的请求接口的一段js代码，通过script标签本身就可以跨域请求的特性的一种方式。
3. jsonp严格来说不是发送xmlhttpRequest请求，而是加载一个js脚本，服务器会响应，把信息返回给callback参数（res），来实现回调
4. 所以说cors调用的接口在控制台 —network —XHR 可以找到 而jsonp调用的接口在 控制台 --network —JS中可以找到

三.接口代理：用过修改nginx服务器配置来实现（前端修改，后端不动）

1. 创建vue.config.js 配置webpack
   vue.config.js：

module.exports = {
    devServer: {
        host: 'localhost', //主机名
        port: 8080, //用于修改端口
        proxy: {
            '/search': {
                target: 'https://www.imooc.com',
                changeOrigin: true, //主机头
            }
        }
    }
}

  mounted()
  {
    let url = '/search/hotwords';
    jsonp(url,(err,res)=>{
      let result = res;
      this.data = result
    })
  }

原接口地址：https://www.imooc.com//search/hotwords
我们进行上面代码进行代理之后，发现接口地址变为：

表面访问的是自己域名下的/search/xxx接口，实际是访问mooc网的/search/xxx接口，好像这么接口是我们自己的，这样实现了跨域。

具体怎么实现的呢：
1.

 proxy: {
            '/search': {
                target: 'https://www.imooc.com',
                changeOrigin: true, //主机头
            }
        }

这段代码，当访问到的接口地址找到了/search，然后进行拦截，就会执行target，内部就会访问慕课网的接口（转发到慕课网上去）

  mounted()
  {
    let url = '/search/hotwords';
    jsonp(url,(err,res)=>{
      let result = res;
      this.data = result
    })
  }

由于访问到了慕课网的接口，所以url地址直接写'/search/hotwords'即可，不用前面加慕课网的地址

    devServer: {
        host: 'localhost', //主机名
        port: 8080, //用于修改端口

这是代理者，主机名和端口名，所以呈现出来的效果是：

-----------------------------------------------------------------------------------------------------

扩展：假设慕课网有很多个接口 /a /b 。。。。 如果每个接口都进行代理拦截，很麻烦，我们可以建一个虚拟地址/api 来进行接口统一，由于虚拟的，实际上不访问/api 。要想实现虚拟，必须利用proxy中的pathRewrite，将其设置为空

module.exports = {
    devServer: {
        host: 'localhost', //主机名
        port: 8080, //用于修改端口
        proxy: {
            '/api': {
                target: 'https://www.imooc.com',
                changeOrigin: true, //主机头
                pathRewrite: {
                    '/api': ''//创建虚拟地址，当访问/api是想当于访问‘’，达到虚拟的效果
                }
            }
        }
    }
}

mounted()
  {
    let url = '/api/search/hotwords';
    jsonp(url,(err,res)=>{
      let result = res;
      this.data = result
    })
  }