Vue2：网络代理

网络代理

 

1.具体的网络请求的工具的用法 （见全栈阶段博客）

CORS跨域：

https://www.cnblogs.com/LIXI-/p/16548288.html

 引入axios：

1、下载axios包到node_module　　npm i axios

2、再页面中引入　　import axios from "axios"　　（去node_modules中找到的axios文件夹中

3、axios请求　　配置公共网址

async mounted() {
　　axios("http://ip:7001/apply")
　　//main.js文件设置的baseUTL：axios.defaults.baseURL="http://ip:8080/xxk"
　　//配置公共url  如果这个axios去请求 "apply"  它实际的网址是http://ip:8080/xxk/apply
　　// let res=await axios("/xxk/apply")==>实际请求的是:http://ip:8080/xxk/apply
　　//==>希望8080服务器帮我们代理 请求:http://ip:7001/apply
}

 

组件中使用:this.$axios("/ajax1")

整个运行的流程: $axios是原型上的那个工具 就会基于它的baseURL请求"/ajax1" 因此就会请求 baseURL+"/ajax1"
然后baseURL又是8080服务器中代理配置过的 它发现网址中包含了代理的关键字网址 就会去代理请求 target网址

 

 

4、main.js文件中：

import axios from "axios"
Vue.prototype.$axios=axios
Vue.prototype.$axios.defaults.baseURL="http://ip:8080/api"

 

5、

配置8080服务的代理
vue.config.js文件:

lintOnSave: false, //关闭eslint的严格模式检测,
devServer: {
    port: 8080, //默认vue脚手架配置就8080
    //代理配置,这里只是配置,不用写代理服务器的代码(配置好了它帮我们实现)
    // proxy: {
        // '/api': 'http://localhost:7001',
    // },
    proxy: {
        '/xxk': {
        target: 'http://ip:7001',
        secure: true, //如果代理的target是https接口,需要配置它
        pathRewrite: {
            '^/xxk': '/'
        },
        //请求时重写pathname:
        //项目组件中请求的是http://ip:8080/xxk/apply
        //8080服务器就会帮我们代理请求 http://ip:7001/apply

        //项目组件中请求的是http://ip:8080/ohter/apply那么proxy就检测不到 就不会做代理
        },
　　　　　还可以写多个代理...
    },
}        

 

 

注:

egg后端的缓存,要求前端的网络请求运行携带缓存cookie数据,axios网络请求携带参数下面两种方式:

①axios.defaults.withCredentials=true;//让ajax携带cookie

②axios.post(url,{pwd:123},{ withCredentials: true },(res)=>{})

axios.get(url,{params:{pwd:123},{ withCredentials: true },(res)=>{})

后端egg中配置:

设置允许哪些源可以跨域访问当前服务器

credentials: true 跨域服务的页面去做cookie缓存

config.cors = {

origin: 'http://ip:8080',

credentials: true//后端会给去前端返回缓存数据包 告诉浏览器 去做缓存

}

 

2.网络请求工具的二次封装

2.1 原理: 把用到的axios等网络请求工具封装成自己的工具 在项目中使用,防止axios出问题时,快速的更换工具 不会影响项目代码

2.2.设计: xx.prototype.myaxios=axios xx.myaxios.post=axios.post xx.myaxios.get=axios.get xx.myaxios.put=axios.put

 

3.代理

 

module.exports={
    lintOnSave:false,
    devServer:{
        port:"8001",
        host:"localhost",
        proxy:{
            "/":{
                target:"http://ip:7001",
                changeOrigin:true,
                pathRewrite:{"^/":""}
            }
        }
    }
}