vue-02 前端跨域解决方案

 

目录

1.概述

2.解决方案

2.1 CORS跨域

2.1.1 概述

2.1.2安装axios插件

2.1.3请求头的内容

2.2 JSONP跨域

2.2.1 概述

2.2.2 前端安装JSONP插件

2.3 代理跨域

2.3.1概述

2.3.2 创建vue.config.js

2.3.3vue.config.js

2.3.4效果 可以看到 请求url地址是localhost:8081

2.3.5配置扩展

---

1.概述

1.跨域是浏览器为了安全而做出的限制策略

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

2.解决方案

2.1 CORS跨域

2.1.1 概述

CORS跨域 - 服务端设置，前端直接调用，后台允许某个站点进行访问

2.1.2安装axios插件

npm i axios --save -dev

 import axios from 'axios';
 mounted(){
    let url = "https://www.easy-mock.com/mock/5fa7eef4234c9b0d8babe68d/example/mallData";
    axios.get(url).then(()=>{

    })
  }

2.1.3请求头的内容

Access-Control-Allow-Credentials:true 允许前端携带信用凭证，cookie

Access-Control-Allow-Origin: http://localhost:8080 阔以在后台指定前端以 localhost:8080的地址去访问

2.2 JSONP跨域

2.2.1 概述

前端适配，后台配合，前后台同时改造

2.2.2 前端安装JSONP插件

npm i jsonp --save-dev

 import jsonp from 'jsonp';
 mounted(){
   let jsonpUrl = "https://barrage-kunpeng.csdn.net/api/barrage/list";
    jsonp(jsonpUrl,()=>{
 
    })
  }

可以看到他是在js中的

2.3 代理跨域

2.3.1概述

接口代理-通过修改nginx服务器配置来实现，前端修改后台不动

2.3.2 创建vue.config.js

2.3.3vue.config.js

module.exports = {
    devServer:{
        host:"localhost",
        port:8081,
        proxy:{
            '/mock':{
                target:"https://www.easy-mock.com",
                changeOrigin:false
            }
        }
    }
}

2.3.4效果 可以看到 请求url地址是localhost:8081

2.3.5配置扩展

代理把api置换为空

 mounted(){
    let url = "/api/mock/5fa7eef4234c9b0d8babe68d/example/mallData";
  
    jsonp(url,()=>{
 
    })
  
  }

module.exports = {
    devServer:{
        host:"localhost",
        port:8081,
        proxy:{
            '/api':{
                target:"https://www.easy-mock.com",
                changeOrigin:false,
                pathRewrite:{
                    "api":""
                }
            }
        }
    }
}