解决跨域问题

解决跨域问题：

1.cors：解决跨域的第三方插件，服务端设置响应头Access-Control-Allow-Origin：指定可访问资源的域名

---

2.jsonp：通过script标签中的 src属性 可以跨越同源策略，但是只支持get 请求，用的不多

---

3.nginx：反向代理

---

4.Websocket是HTML5的一个持久化的协议，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案

---

5.vue脚手架配置代理

方法一：

在vue cli 中的 vue.config.js 文件进行配置，相当于开启了一台端口号相同的代理服务器，在当前开发环境下将 API 请求代理到 另一个API 服务器，   

devServer: {
    proxy: 'http://localhost:4000'
}

        优点：配置简单，请求资源时直接发送给前端（8080）即可 

        缺点：

                1.只能配置一个代理，

                2.不能够灵活的控制其是否要代理，如果public文件夹中存在与代理请求相同的文件名，

                        则会返回public中的文件，而不进行代理。

方法二：

编写vue.config.js 配置具体代理规则：

module.exports = {
  devServer: {
    proxy:{
      '/api1':{   //匹配所有以  'api1' 开头的请求路径
        target: 'http://localhost:5000',  //代理目标的基础路径
        pathRewrite: {'^/api1': ''},  //在返回给服务器的路径中把 '/api1' 去掉
        ws: true,    // 用于使用websocket
        changeOrigin: true
      },
      '/api2':{   //匹配所有以  'api2' 开头的请求路径
        target: 'http://localhost:5001',
        pathRewrite: {'^/api2': ''},
        ws: true,
        changeOrigin: true
      },

    }
  }
}

/*
    changeOrigin 设置为true时，服务器收到的请求头中的host为：localhost:5000,
                (即与服务器的端口号5000相同)
    changeOrigin 为false时，服务器收到的请求头中的host为：localhost:8080
                 (即为当前网页的端口号)
    默认值是true
*/

优点：可以配置多个代理，且可以灵活的控制请求是否要代理。

缺点：配置略微繁琐，请求资源时必须加前缀 

---