域CORS跨域利用Vue-CLI配置代理服务器GitHub用户搜索案例本案例需要下载axios库

npm

sharing缩写CORS用于让网页的受限资源能够被其他域名的页面访问的一种机制。

--摘自维基百科

我们从站点A对其他站点进行网络请求时浏览器端和服务端需要对这个请求进行处理保证这个请求是安全的。

为什么需要跨域

我们的客户端想访问A服务器但是A服务器存在跨域问题我们就再开一个同源的代理服务器B我们把请求给B服务然后B服务器去访问A服务器A处理好信息返回给BB再将数据返回给客户端

跨域问题是前端存在的问题而我们服务器之间传递信息直接是用http是不存在什么跨域问题的

接口代理跨域特点

服务端、客户端均不需要配置通过中间服务器(代理服务器)的配置实现(如Nginx、IIS、Apache)我们这里使用的Vue-CLI也能帮我们实现跨域处理

CORS跨域

Core对跨域策略的支持非常好用)。

CORS跨域是由服务端应用设置的一个跨域策略比如开放指定的HTTP

Method、指定请求方Url、指定请求携带的Headers必须包含的字段等等~。

CORS这种方式简单高效合理的使用它的策略可以保证服务器的安全的同时也提升了前后端的开发体验~

CORS跨域特点

后端配置前端直接请求;策略丰富可支持多种策略如HTTP方法、URL等;前后端交互方式非常规范除了常用的GET、POST、HEAD

其他方法进行请求则需要发起OPTIONS请求对服务器端进行跨域允许的许可请求

利用Vue-CLI配置代理服务器

clickgetStudents获取学生信息/buttonbr/button

axios

{getStudents(){axios.get(http://localhost:8080/lscStudent/students).then(response

{console.log(请求成功了,response.data)},error

{console.log(请求失败了,error.message)})},getCars(){axios.get(http://localhost:8080/lscCar/cars).then(response

{console.log(请求成功了,response.data)},error

{console.log(请求失败了,error.message)})}}}

/script

src/main.js,},},lintOnSave:false,//

开启代理服务器方式一//

http://localhost:5000,pathRewrite:{^/lscStudent:},//

ws:

//用于控制请求头中的host值,默认值为true},/lscCar:

{target:

http://localhost:5001,pathRewrite:{^/lscCar:},//

ws:

devServer:{proxy:http://localhost:5000

如果我们请求的数据再8080中存在那么就直接用代理服务器的不能访问目标服务器

工作方式若按照上述配置代理当请求了前端不存在的资源时那么该请求会转发给服务器

优先匹配前端资源

changeOrigin设置为true时服务器收到的请求头中的host为localhost:5000//

changeOrigin设置为false时服务器收到的请求头中的host为localhost:8080},/api2:

true,pathRewrite:

优点可以配置多个代理且可以灵活的控制请求是否走代理缺点配置略微繁琐请求资源时必须加前缀

GitHub用户搜索案例

针对IE浏览器的特殊配置含义是让IE浏览器以最高渲染级别渲染页面

--meta

htmlWebpackPlugin.options.title

%/title/headbody!--

在这引入bootstrap样式如果对应的一些样式没有不会报错比如字体什么的如果在main.js中引入会进行严格的检查因为是ES6语法

main.js

./App.vueVue.config.productionTip

falsenew

h(App),beforeCreate(){Vue.prototype.$bus

this}

{name:App,components:{Search,List},}

/script

clickgetUsersSearch/button/div/section

axios

{getUsers(){//请求前更新List的数据this.$bus.$emit(updateListData,{isLoading:true,errMsg:,users:[],isFirst:false})axios.get(https://api.github.com/search/users?q${this.keyWord}).then(response

{console.log(请求成功了)//请求成功后更新List的数据this.$bus.$emit(updateListData,{isLoading:false,errMsg:,users:response.data.items})},error

{//请求后更新List的数据this.$bus.$emit(updateListData,{isLoading:false,errMsg:error.message,users:[]})})}}}

/script

classcard-title{{user.login}}/h4/div!--

展示欢迎词

v-showinfo.isLoading加载中.../h1!--

展示错误信息

v-showinfo.errMsg{{errMsg}}/h1/div

default

{info:{isFirst:true,isLoading:false,errMsg:,users:[]}}},mounted(){this.$bus.$on(updateListData,(dataObj){//动态合并两个对象的属性this.info

{...this.info,...dataObj}})},beforeDestroy(){this.$bus.$off(updateListData)}}

/scriptstyle

axios通用的Ajax请求库官方推荐效率高vue-resourcevue插件库vue

1.x使用广泛官方已不维护