什么是跨域？ 如何解决跨域？

一 ：跨域有什么现象？

        现在的 web 项目基本上都是前后端分离，跨域问题就很容易出现

        在实际中跨域现象是如何出现的，如下实验：

          前端：浏览器正在访问一个页面：https://www.helloworld.net/special

                     此页面中发送了一 个后端 http 接口

          后端：访问的后端接口为：https://tiger-api.helloworld.net/v1/special/getSpecoalList

 上面的提示：has been blocked by CORS policy: Response to preflight request does not pass access control check

意思是：已被 CORS 策略阻止；是不能访问这个接口的

这个就是没有配置相关的跨域参数，是不能访问这个接口的

二 ：什么是跨域问题？

举例来说：浏览器访问一个页面时，比如访问：https://www.helloworld.net/special

此时的  协议：https ，主机：www.helloworld.net ， 端口：80 

那么这个页面中，发的接口请求，这个接口的协议，主机，端口，必须和当前的页面一样才能访问

否则就会出现上面的跨域现象

注意：跨域问题出现在浏览器中，总的来说，浏览器只有在  协议，主机，端口三者相同是，才可以互相访问，否则不可以访问，这就是浏览器的  同源策略  而造成跨域问题

跨域请求不通是因为：请求能正常发出去，后端也能正常响应，是浏览器把响应拦截了，所以才会出现报错  ： has been blocked by CORS policy: Response to preflight request does not pass access control check

以下是图解：

 三：如何解决跨域问题？

解决跨域的方法有好几种，这里介绍两种常用的方法。

1.CORS方法 （Cross-Origin Resource Sharing，跨域资源共享）该方法就是通过服务器设置一系列响应头来实现跨域；  一般只需后端加一些配置，就是在响应头中添加一些字段，如图：

 access-control-allow-origin  ：该字段是必须的，它的值要么是请求时 origin 字段的值，要么是一个 * ，表示接受任何域名的请求。

access-control-allow-credentials ：该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie 不包括在 CORS 请求之中，设为 true ，表示服务器明确许可，Cookie 可以包含在请求中，一起发送给服务器，这个值也只能设为 true ，如果服务器不要浏览器发送 Cookie ，删除字段即可

Access-Control-Allow-Methods ：该字段必须，他的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法，注意，返回的是所有支持的方法，而不是浏览器请求的那个方法，这是为了避免多次 “ 预检 ” 请求

其实最重要的是：access-control-allow-origin 字段，添加一个 * ，允许所有的域都能访问

2 . 跨域的解决方案-代理转发（最常用）
代理转发的原理：在前端服务和后端接口服务之间架设一个中间代理服务，它的地址保持和前端服务一致，那么：

代理服务和前端服务之间由于协议域名端口三者统一不存在跨域问题，可以直接发送请求
代理服务和后端服务之间由于并不经过浏览器没有同源策略的限制，可以直接发送请求
这样，我们就可以通过中间这台服务器做接口转发，在开发环境下解决跨域问题（只能解决开发环境下跨域的问题）。

实现方法：vue-cli为我们内置了该技术，我们只需要按照要求配置一下即可。在vue.config.js配置文件中，有一项是devServer，如下代码段：

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