项目如何解决跨域问题

为什么产生跨域？

浏览器的同源策略导致的，同源策略：协议、域名、端口号都一致，只要有一项不同就会产生跨域

解决

Proxy（vue）

vue的处理方案：我们可以通过webpack为我们起一个本地服务器作为请求的代理对象，通过服务器与服务器进行请求数据，得到结果后，本地服务器将结果返回给前端

但是项目最终发布上线时，如果web应用和服务器不在一起仍会产生跨域

vue.config.js进行配置

  devServer: {
    port: port,
    // 默认打开浏览器
    open: true,
    proxy: {
      // 只要目标地址有api 就会进入
      '/api': {
        // 目标地址
        target: 'xxx',
        // 默认true, 允许本地代理服务器向目标地址发送请求
        chandeOrigin: true,
        // 重置路径: 可以任意将不同的接口指向同一个目标地址
        pathRewrite: {
          '^/api': '/api'
        }
      }
    }
  },

JSONP

原理是前端通过script标签穿一个函数给后端，后端接收函数后调用函数以参数的形式将数据返回给前端（技术有点老，先占个位，以后实现）

CORS（后端解决）

CORS （Cross-Origin Resource Sharing，跨域资源共享）是一个系统，它由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应

CORS实现起来非常方便，只需要增加一些 HTTP头，让服务器能声明允许的访问来源

只要后端实现了 CORS，就实现了跨域