前端跨域-随笔

浅谈前端跨域

一、什么是跨域

跨域可以简单理解为因为JavaScript同源策略的限制，a.com域名下的js无法操作b.com或是c.a.com域名下的对象。跨域不是请求发不出去，也不是服务端收不到，而且还能正常返回结果，只是被浏览器所拦截了。

二、什么是同源策略

同源策略是浏览器核心的安全功能，就是说浏览器的tab同时打开两个页面，当浏览器的其中一个tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和当前页面同源的脚本才会被执行。 如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。同源策略是浏览器的行为，是为了保护本地数据（Cookie、LocalStorage、IndexedDB）不被JavaScript代码获取回来的数据污染。

三、CORS跨域

服务端设置，前端直接调用（后台允许前端某个站点进行访问）,
在响应头上添加Access-Control-Allow-Origin属性，指定同源策略的地址。同源策略默认地址是网页的本身。只要浏览器检测到响应头带上了CORS，并且允许的源包括了本网站，那么就不会拦截请求响应。

import axios from 'axios'
//-----------------------------------
 export default {
        // cors跨域
        mounted(){
            let url = "https://cnodejs.org/api/v1/topics/"
            axios.get(url).then((res)=>{console.log(res,'qq')})
        }
  }

四、JSONP跨域

利用script元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 数据。JSONP请求一定需要对方的服务器做支持才可以。ps：本身不是一个请求，是一个js。

import jsonp from 'jsonp'
// ------------------------------
export default {
  // jsonp跨域
    mounted(){
       let url = 'http://www.dangdang.com/Standard/Framework/Core/hosts/pc_mina.php'
        jsonp(url,()=>{})
    }
}

js相应的位置会产生一个被封装好的一个参数callback，对应的还有一个名为jp0的函数。

五、接口代理

通过修改nginx的服务器配置来实现。
首先需要在src同级建一个名为vue.config.js的文件（webpack配置表）

module.exports = {
    // 安全省事 前后端都不需要改
    devServer:{
        // 主机
        host:'localhost',
        // 端口号 可以在这里修改端口号本地打开默认为8080
        port:8080,
         proxy:{
             '/Standard':{
                //  url路径 目标源
             target:"http://www.dangdang.com",
            //  changeOrign默认 false:请求头中的host是浏览器发过来的host
            // true发送请求头中host会设置成target
             changeOrigin:true,
            // 路径转发规则 接口多的时候可以设定虚拟端口进行拦截，每个上面都有
            // api，然后发到被代理的端口
             pathRewrite:{
                '/api':'/api'
              }
            
            }
            
         }
    }
}