前端跨域解决方案

1. 什么是前端跨域？

• 跨域是前端独有，而后端是不存在的；
• 跨域是浏览器为了安全而做出的限制策略，防止其他人随意去抓取篡改数据；
• 浏览器请求必须遵循同源策略：同域名、同端口、同协议，比如当前所在的域名和请求的域名都必须是csdn.com，端口都必须是8080，协议必须都是http或必须都是https，只要有一个不一致，就会产生跨域问题，限制访问；

2. 前端跨域解决方案有哪些？

• CORS跨域：只需要服务端设置允许前端某个站点进行跨域访问，前端直接调用，对前端来说最省事，比如服务端用spring boot全局配置如下：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //允许跨域访问资源定义
        registry.addMapping("/api/**")//只允许api开头的资源方法
                .allowedOrigins("http://localhost:8080", "http://127.0.0.1:8080")//只允许这两个域名及端口访问
                .allowCredentials(true)//允许发送cookie
                .allowedMethods("GET", "POST", "PUT", "DELETE");
    }
}

• JSONP跨域：前端修改，后端不改，前端需要安装jsonp插件，然后用jsonp去发送请求，但是这个请求不是XHR请求而是一个JS脚本，返回的数据被包含在jsonp内置的回调函数中；

• 代理跨域：前后端都不改

   1.通过修改nginx服务器配置来实现，在服务部署的时候使用；
   2.通过接口代理，比如：在vue.config.js中添加接口代理配置，在开发过程中使用；
  

  module.exports = {
    devServer: {
      host: 'localhost',
      port: 8080,
      proxy: {
        '/api': {
          target: 'http://localhost:8082',
          changeOrigin: true,
          pathRewrite: {
            '/api': ''
          }
        }
      }
    }
  }
  

上述在vue.config.js里的配置，拦截http://localhost:8080/api的的请求，接口必须以/api开头，并转发到http://localhost:8082中并将/api重写为’’，即去掉/api，转发的请求为http://localhost:8082/。

• changeOrigin: true意思是把请求中的host设置成target
• pathRewrite是指把/api进行重写