前端跨域问题

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

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