DaZeng:跨域的三种解决方案:JSONP跨域、CORS跨域、接口代理

跨域的三种解决方案

  • 跨域
    • 什么是前端跨域
    • 怎么去解决跨域
    • CORS跨域
    • JSONP跨域
      • jsonp与cors的区别:
    • 接口代理

跨域

跨域的项目实战:从0独立开发企业级电商系统

什么是前端跨域

前端独有,是浏览器为了安全而做出的限制策略。

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

怎么去解决跨域

CORS跨域
JSONP跨域
代理跨域

CORS跨域

服务端设置,前端直接调用。
说明:后端允许前端某个站点进行访问。如Easy Mock:开源的公共MOCK平台,公共接口。
在axios中访问mock的接口后

    let url = 'https://www.easy-mock.com/mock/5e664553f4760626a3a312e0/example/'
    axios.get(url).then((data)=>{
      console.log(data)
    })

控制台查看network
在这里插入图片描述
响应头中:
Access-Control-Allow-Credentials:允许前端将cookie带过去
Access-Control-Allow-Origin:表示允许指定的这个网址访问mock的接口

JSONP跨域

前端适配,后台配合
说明:需要前后端同时改造

安装jsonp

npm i jsonp -S

在这里插入图片描述
jsonp不是请求在network中的XHR里面没有,JS里面有,是js的一段脚本。

jsonp与cors的区别:

let url2 = 'https://order.imooc.com/pay/cartorder'
    axios.get(url2).then((data)=>{
      console.log(data)
    })
    jsonp(url2,{},(err,res)=>{
      console.log(res)
    })

当使用axios时控制台输出信息,表示不是允许的网站,无Access-Control-Allow-Origin请求头。
在这里插入图片描述
当使用jsonp时:
在这里插入图片描述
在这里插入图片描述

接口代理

实现:通过修改nginx服务器配置来实现;
说明:前端修改,后台不动;

具体操作:
1.在整个vue项目项目中新增vue.config.js的配置文件
2.文件中写入:

// 开发环境下的接口代理  访问/a代理到/b,则实际访问的/b
// webpack的配置表传送给nodejs服务器
// nodejs遵循commonjs规范抛出就不用import了
module.exports = {  
    // 自动加载devServer中的配置表
    devServer:{
        host:'localhost',
        port:8080,
        // 代理
        proxy:{
            // 访问/pay时实现拦截转发到target中
            '/api':{
                // 目标网址,内部访问到target的接口
                target:'https://order.xxx.com',
                changeOrigin:true,
                pathRewrite:{
                    '/api':''
                }
            }
        }
    }
}

实现原理:

  1. 书写好config.js后重启项目,vue会自动加载此配置文件下的devServer配置表
  2. 针对proxy中做路由统一拦截(此处是统一拦截的/api),在.vue文件中定义url时都统一定义为如下:let url2 = ‘/api/pay/cartorder’,在拦截后进行访问目标地址时由**changeOrigin:true,pathRewrite:{’/api’:’ '}**自动去掉/api进行访问。
  3. 此时看似访问的localhost:8080/api/pay/cartorder实则访问的https://order.xxx.com/pay/cartorder
    在这里插入图片描述

你可能感兴趣的:(web总栏,vue,JavaScript,jsonp,cors,跨域,接口代理)