前端跨域问题

什么情况下会出现跨域问题?并且怎么解决的?


        首先要明白,只有浏览器中,才会出现跨域问题,只有发送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进行反向代理

你可能感兴趣的:(项目中的疑难解惑,前端,html,开发语言,web,javascript)