背景

浏览器向服务器发送ajax请求时，有时候会触发跨域问题。

原因是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。

同源策略指协议、域名、端口完全一致

解决方案

代理转发

跨域是因为浏览器造成的，只要开启代理服务器进行转发，服务器和服务器之间是不存在跨域问题的。

在vue项目中，可以在在vue.config.js配置文件中设置代理服务器

module.exports = {
  devServer: {
    // 代理配置
    proxy: {
        // 如果请求地址以/api打头,就出触发代理机制
        '/api': {
          target: 'http://localhost:3000' // 我们实际要访问的接口地址
        }
      }
    }
  }
}

此方法适用于开发阶段，当项目上线后，前端项目和接口地址应该放在一个服务器上

跨域资源共享 CORS

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。IE8+：IE8/9需要使用XDomainRequest对象来支持CORS。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

后端在响应时在头信息设置Access-Control-Allow-Origin字段：*

JSONP

JSONP（JSON with Padding）兼容性好（兼容低版本IE）。是早期前端程序员为了解决跨域问题，被迫想出来的一种临时解决方案。缺点是只支持 GET 请求

原理：<script>标签不受浏览器同源策略的影响，可以通过src属性，请求非同源的js 脚本

如何解决浏览器跨域问题

背景

解决方案

代理转发

跨域资源共享 CORS

JSONP