vue脚手架配置代理

开发者借助脚手架（command line interface）解决Ajax跨域问题

• new XMLHttpRequest() xhr.open() xhr.send()原生方法
• jQurey $.get $.post核心是封装DOM操作
• axios
• fetch

可以解决跨域问题的办法有

• cors需要后端人员配置响应头
• jsonp借助script src属性在引入外部资源的时候不受同源策略的限制，但是需要前后段配合写，并且只能解决get跨域问题
• 代理
  开启代理服务器方法：nginx和 - vue-cli

1. 使用脚手架开启代理服务器（方式一）

npm安装axios 在vue.config.js里配置开启代理服务器,但只能配置一个代理，不能灵活控制到底走不走代理（如果public里出现相同名字既不会走代理）

devServer:{
            proxy:"http://localhost:5000"代理目标的基础路径
        }

获取结构<template>
       <div>
           <button @click ="getStusent">获取信息</button>
           </div>
       </template>

请求代理服务器
<script>
import axios from "axios"
export default{
    name:"App",
    methods:{
        getStusent(){
            axios.get("http://localhost:8080.students")
            .then(response=>{console.log("请求成功",response.data)},
            error=>{console.log("请求失败",error.message)})
        }
    }
}
</script>

1. 使用脚手架开启代理服务器（方式二）

devServer:{
            proxy:{
                "/zhang":{
                        target:"<http://localhost:5000>"代理目标的基础路径,
                    pathRewrite:{"^/zhang":""}
                    ws:true,
                    changeOrigin:true
            }}
        }

• 备注："^/zhang"为：匹配以/zhang为开头的前缀，以保证代理服务器转发给最终需要的服务器的名字
• ws:true 用于支持webscoket
• changeOrigin:true 用于控制请求头中的host值

请求代理服务器
<script>
import axios from "axios"
export default{
    name:"App",
    methods:{
        getStusent(){
            axios.get("http://localhost:8080/zhang/students")
            .then(response=>{console.log("请求成功",response.data)},
            error=>{console.log("请求失败",error.message)})
        }
    }
}
</script>