跨域
为什么跨域?
因为浏览器的安全机制 同源策略( 同端口 同协议 同域名 )
1.jsonp 动态创建一个script标签
2.代理跨域
因为vue脚手架中集成了一个小的内置服务器叫devServer 我们代理跨域就是让这个小的内置服务器帮助我们请求数据 这样一来我们就绕开了浏览器同时也就绕开了浏览器的安全机制---同源策略
1.配置代理跨域在vue.config.js中的devServer中配置如下内容
module.exports={
devServer:{
open:true,
proxy: {
'/api': {
target: 'http://www.weather.com.cn/', //对应自己的接口
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}}
}
}
}
2,千万不要忘了去修改你的请求地址
3.cors(后端解决)
工作小问题
在公司跨域谁解决?
1.在开发过程中 通常前端解决(代理跨域 上线之后就废了)
2.上线之后肯定是后端解决
axios发送数据
get
使用params发送数据 params需要一个对象
import service from "@/util/service.js"
export function getlink(url,params){
return new Promise((resolve)=>{
service.request({
url,
method:"GET",
// 发送数据
params
}).then((ok)=>{
resolve(ok)
})
})
}
发送的时候
getlink("地址",{数据}).then((ok)=>{
console.log(ok)
})
post
使用post发送数据需要使用 var param=new URLSearchParams();修改传参方法 使用param.append("uname","xixi")添加数据并且使用data发送数据
import service from "@/util/service.js"
export function postlink(url,data){
return new Promise((resolve)=>{
service.request({
url,
method:"POST",
data
}).then((ok)=>{
resolve(ok)
})
})
}
funb(){
let usp=new URLSearchParams
// usp.append("key","val")
usp.append("posttext",this.inputvalb)
postlink("/api/ceshi/post",usp).then((ok)=>{
console.log(ok)
})
}
本文来自博客园,作者:{Teil}},转载请注明原文链接:https://www.cnblogs.com/user-001/p/15632661.html