向服务器发请求为什么会有跨域问题?
在后端没有开启 cors 的情况下,浏览器的同源策略
跨域问题是由浏览器的同源策略(Same-Origin Policy)引起的。同源策略是一种安全策略,要求在浏览器中运行的JavaScript脚本只能访问与其所在页面具有相同协议、主机名和端口号的资源。如果请求不满足同源策略,浏览器就会拒绝该请求,从而产生跨域问题。
例如,假设网站运行在http://www.XXXXX.com
上,向位于http://api.XXXXX.com
的服务器发出AJAX请求,则请求将被视为跨域请求并被浏览器拒绝。同样,如果使用IP地址访问服务器,也可能会遇到跨域问题。
解决跨域问题的常用方法包括:
使用JSONP(JSON with Padding)技术:该技术利用了
<script>
标签可以跨域加载JS文件的特性,通过动态创建<script>
元素并指定src
属性来实现跨域请求。跨域资源共享(CORS):该技术是通过HTTP头部添加额外信息来告诉浏览器该请求是可以接受的,从而允许跨域访问。您需要在服务器端配置CORS支持才能使用此方法。
代理服务器:该方法是在前端应用程序和后端服务器之间添加一个位于同一域名下的代理服务器,将跨域请求转发到目标服务器。这种方法需要在后端配置代理服务器。
以上方法各有优缺点,您可以根据具体情况选择不同的方法来解决跨域问题。
常用的是代理服务器,来解决发请求跨域问题:
后端没有开启 cors ,那么前端解决不了,不能直接请求后端服务,那就搞个中间服务,中间服务刚好和我们的前端服务同源,前端和中间服务可以通信,而中间服务是node, node后台向后端发请求是不受同源策略影响的,因为同源策略只针对浏览器!!! , 这样就是代理,中间层的服务将前端的请求代理给了后端接口。
这样,我们就可以通过服务器代理做接口转发,在开发环境下解决跨域问题,看起来好像挺复杂,其实vue-cli已经为我们内置了该技术,我们只需要按照要求配置一下即可
在添加代理服务器时一定要注意去掉before这个选项,这个是mock数据,会影响到我们的请求,并且修改完成之后要重启服务。
module.exports = {
devServer: {
// ... 省略
// 代理配置, 注意:proxy 的字母p是小写(写代码不要习惯快捷键和自动填充)
proxy: {
// 如果请求地址以 /api 开头 , 就触发代理机制
// http://localhost:9588/api/login -> http://线上的地址/api/login
'/api': {
target: 'http://线上的地址' // 我们要代理的真实接口地址
}
}
}
//去掉before这个选项
// before: require('./mock/mock-server.js')
}
}
注意:在使用时 去掉axios基地址