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

最新推荐文章于 2025-06-17 14:50:16 发布

原创最新推荐文章于 2025-06-17 14:50:16 发布 · 1.1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#jsonp #cors #跨域 #接口代理

web总栏同时被 3 个专栏收录

62 篇文章

订阅专栏

JavaScript

18 篇文章

订阅专栏

vue

8 篇文章

订阅专栏

跨域的三种解决方案

跨域

跨域

跨域的项目实战：从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':''
                }
            }
        }
    }
}

实现原理：

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