什么情况下会出现跨域问题?并且怎么解决的?
首先要明白,只有浏览器中,才会出现跨域问题,只有发送Ajax请求才会出现跨域问题,而跨域了,就相当于违法了同源策略,所谓的同源策略,就是请求当前网页的地址和网页中请求数据的地址不一样,即协议名,域名或端口号三者有任意一个不相同,就是违法了同源策略,就是跨域;
怎么解决:只有使用ajax技术发送HTTP请求才算跨域,
解决跨域有好几种方法,
第一种方法是,jsonp原理:(只能处理GET请求)
就是当用户点击按钮是,生成一个script标签,给script标签添加src属性,并且告知服务器前端接收数据的回调函数的名称,再将script标签插到页面中去,服务器接收到前端传来的回调函数名称,并且配合服务器数据,生成数据,返回给前端,数据是类型是字符串的,前端得到数据,进行操作
// 发送jsonp请求的函数
function jsonp() {
var script = document.createElement('script')
script.type = 'text/javascript'
// 传参并指定回调执行函数为backFn
script.src = 'http://localhost:4000/getUserInfo?id=100&callback=fn'
document.body.appendChild(script)
}
// 回调函数, 接收响应数据
function fn(data) {
console.log(data)
}
第二种方法就是cors,跨资源共享:
因为跨域问题只出现在浏览器上,具体点就是出现在服务器响应数据给浏览器的时候,所以,只需要服务器在返回响应的时候告诉浏览器,允许被当前域名跨域请求就可以了,所以cors方法要做的就是如何告诉浏览器允许跨域,就是去服务器中配置响应头,由于要配置服务器,所以面试可以直接说这是后端的事
// 使用cors, 允许跨域, 且允许携带跨域cookie
app.use(function (req, res, next) {
// console.log('----')
// 允许跨域的地址
res.header('Access-Control-Allow-Origin', 'http://localhost:5500') // 不要是*
// 允许携带凭证(也就是cookie)
res.header('Access-Control-Allow-Credentials', 'true')
// 允许跨域的请求头
res.set("Access-Control-Allow-Headers", "Content-Type")
// 放行
next()
})
第三种就是我们现在项目种比较常用的方法,代理服务器
开发环境: 利用webpack-dev-server中的http-proxy-middle 进行正向代理
vue脚手架项目,在vue项目中,根目录找到vue.config.js文件,在devServer中书写,url地址,target等,具体写什么,要根据需求来定
react脚手架项目
自定义webpack配置
生产环境: 利用nginx进行反向代理