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

不念不忘少年蓝@ 2023-07-09 13:24 14阅读 0赞

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

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

*  ##### 方式一：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脚本

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MTAwNw_size_16_color_FFFFFF_t_70]

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

*  ##### 方式三：代理跨域（前端修改，后台不动） #####
    
     *  接口代理 通过修改nginx服务器配置实现  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MTAwNw_size_16_color_FFFFFF_t_70 1]
     *  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':''   
            }
          }
    
        }
      }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MTAwNw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200627103041445.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MTAwNw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MTAwNw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200627110144625.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MTAwNw==,size_16,color_FFFFFF,t_70