前端跨域解决方案

首先了解什么是同源策略

1.同源策略：是浏览器提供的一种安全机制，限制来自不同源的数据。如果当前页面的URL地址和Ajax的请求地址不同源，浏览器不允许得到服务器的数据

2.同源：协议 http||https、IP和 port端口 都相同则同源，只要有一项不同就是不同源

不同源就是跨域

1.当前显示的页面中，如果触发了一个Ajax请求，如果请求的URL地址和当前页面的URL地址不同源就是跨域

2.浏览器不允许跨域获取数据，浏览器就会报错

解决跨域问题方法

1.jsonp

需要前端和后端的配合才可以  前端实现手段：需要后台配置的！

基本实现

<script type="text/javascript">
    // 2.文件资源
    // JSONP：获取文件资源，压根不受同源策略限制；
    //        URL设置给 script 标签
    function fn (data) {
        console.log(data)
    }
</script>


<!-- 前端拿到是个什么？JS文件，JS代码（变量、函数） -->
<!-- 后台要求：获取文件资源的时候，告诉后台前面函数名叫啥callback=fn -->
<!-- 后台返回：约定好：文件内容：函数执行(); -->
<!--          给大家把前端需要数据，作为函数实参传入，无形中可以拿到数据！ -->

<!-- 疑问：直接把JS文件里面直接写成数据！实现方案为什么不直接返回数据？反而返回是一个JS代码 函数执行(数据) -->
<script type="text/javascript" src="接口地址/jsonp?callback=fn">
    // 上述URL返回的内容： hello({"message":"JSONP请求测试成功","data":{}}) 
</script>

实现原理：（另辟蹊径、瞒天过海）

• 走获取文件资源script这个方式

• 返回文件资源，JS文件，JS代码；函数执行(实参就是我们需要数据)；

改进：

<script type="text/javascript">
    function nihao (data) {
        console.log(data)
    }


    // 1.动态创建一个script标签
    var script = document.createElement('script');

    // 2.修改src属性
    script.src = '接口地址';

    // 3.把动态创建的script标签追加到head标签里面,发出请求；
    var head = document.getElementsByTagName('head')[0]
    head.appendChild(script);
</script>

ajax中jsonp实现：

function nihao(res) {
    console.log(res, 111111111111111);
}

$.ajax({
    // 请求地址
    url: 'http://www.liulongbin.top:3006/api/jsonp',
    // 请求参数
    data: {
        uname: 'lisi',
        age: 12
    },
    jsonp: 'callback',       // jsonp的默认值就是  callback
    jsonpCallback: 'nihao',  // 你调用执行  我的函数名  nihao()
    dataType: 'jsonp',
})

• jsonp 属性的值为了迎合后端（后端根据该名称获取回调函数的名字）；jsonp的值决定了等号左侧的那个名字

• jsonpCallback 决定等号右侧的内容(服务端返回的函数调用的名称)

2.CORS方法，只需后端大哥设置即可，前端无需操作，直接使用,后端写代码(CORS)在响应中添加必要的响应头，让响应回来之后浏览器不报错.

3.代理转发

 

4.跨域-Vue-Cli配置代理转发（实例）

在vue.config.js配置文件中，有一项是devServer，它就是我们下边要操作的主角。

module.exports = {
  devServer: {
    // ... 省略
   // 代理配置
    proxy: {
        // 如果请求地址以/api打头,就出触发代理机制
        // http://localhost:9588/api/login -> http://localhost:3000/api/login
        '/api': {
          target: 'http://localhost:3000' // 我们要代理的真实接口地址
        }
      }
    }
  }
}

基地址

.env.development  

VUE_APP_BASE_API = '/api'

然后根据接口文档使用即可