持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第22天，点击查看活动详情
目前我所了解的能解决跨域问题的方法有：
-
jsonp：通过动态创建script标签，中的src属性可以访问跨域的js脚本
-
后端解决方法：cors跨域资源共享：设置了Access-control-Allow-OriginHTTP
-
proxy：代理服务器，是webpack提供的代理服务，接收客户端发送的请求转发给服务器
设置方法：在vue.config.js中devServer中添加proxy
接下来具体看看是如何实现的把~
跨域☞jsonp
jsonp ：前端和后端搭配解决 利用srcipt的src
#在发请求先，准备一个全局的接收函数，在html创建script标签，发出请求
<html>
....
<script>
window.myCallback = (res)=>{ //声明一个全局函数 'callback'，用于接收响应数据
console.log(res)
}
</script>
//script标签的请求必须在写在定义全局函数之后
//这里需将全局函数的函数名作为参数callback的value传递
//这里callback这个键名是前后端约定好的
<script url="xxx?callback=myCallback"></script>
</body>
</html>
以上只是前端代码
请求路径
cors： 后端解决
跨域☞proxy
proxy : 前端解决（只能解决本地开发时的跨域问题）
#解决思路
在前端服务和后端接口服务之间 架设一个中间代理服务（我们本地开发的服务器）发请求时通过代理服务然后找真实接 口地址
#本地服务器（中间代理服务器）
webback帮我们自动设置成代理服务器的，我们只需要在wenback里设置哪些url会产生跨域，然后设置我们真实要访问 的地址就行
#总结
因为我们本地开发也会有服务器，所以我们不直接发请求，因为发请求浏览器出于保护机制，接收不到请求后的数据，但 是不同源的服务器之间互相发请求没有跨域问题， 所以利用我们的本地服务器向目标地址服务器发请求，这个代理服务 是webback帮我们实现的，我们`只需要设置哪些url会产生跨域，然后设置我们真实要访问的地址就行`
#代码：在`vue.config.js`配置文件中设置
module.exports = {
devServer: {
// ... 省略
// 代理配置
// 设置跨域问题
proxy: {
// 如果请求地址以/api打头,就触发代理机制
'/api': {
target: 'http://ihrm.itheima.net' // 我们要代理的真实接口地址
}
}
}
}
}
}
nginx ：后端解决
