面试题：前端跨域的解决方案

跨域是浏览器为了安全而做出的限制策略（防止别人随意抓取、篡改数据）

浏览器请求必须遵循同源策略：同域名、同端口、同协议

• 方式一：cors跨域

  • 例如：easy-mock，允许任何人访问
  • 服务端设置，前端直接调用，说明：后台允许前端某个站点进行访问
  • cors的原理：服务器返回响应的时候在响应头设置一个允许跨域的header：，可以自己使用中间件写，也可以使用第三方包cors

Access-Control-Allow-Origin：http://localhost:8080 意思是允许localhost:8080的地址访问
Access-Control-Allow-Credentials:true 意思是允许在跨域的时候把前端的cookie传过去

• 方式二：jsonp跨域（前后端同时改造）

  • jsonp是利用script标签的src属性，向不同源的接口发送一个get请求，携带一个回调函数callback，函数的值是在html页面定义的函数的函数名，服务器接收到参数后将其拼接为函数的调用返回
  • jsonp不是请求，只是个js脚本

//jsonp使用：
import jsonp from 'jsonp'
jsonp(url,(err,res)=>{

})

• 方式三：代理跨域（前端修改，后台不动）

  • 接口代理 通过修改nginx服务器配置实现
    
  • vue.config.js代理配置：

module.exports = {
  devServer:{
    host:'localhost',  //主机
    port:8081,
    proxy:{    
      // '/activity':{
      //   target:'https://www.imooc.com',  //代理到慕课网
      //   changeOrigin:true,   //是否将主机头的原点更改为目标url地址
      //   pathRewrite:{
      //     '/activity':'/activity'   //路径的转换规则
      //   }
      // }
      '/api':{   
        target:'https://www.imooc.com',
        changeOrigin:true,  
        pathRewrite:{
          'api':''   
        }
      }

    }
  }
}