前端跨域解决方案

跨域的原因是浏览器的同源策略（不过多陈述了）；

简述个人工作中的常用的跨域解决方案。

1.proxy代理跨域。

原理：实质就是在本地起一个虚拟服务器（webpack-dev-server 的 devServer提供了开发过程中的服务器），利用服务端与服务端的交互不会有跨域问题。本地浏览器端显示的请求路径是 http://localhost:8081/api; 实质上已经被代理成了  http://www.test.com/api。

  devServer: {
    proxy:{
      "/api": {              "/api"指匹配路径（可被重写，也可以写出接口的某些路径 ）
          target: "http://www.test.com", // 需要代理的域名
          changeOrigin: true, //开启代理
          pathRewrite: {  //重写匹配的字段
              "^/api": ""    // ""空意思是路径中去掉  'api' ；请求接口路径 http://www.test.com/user/info;

               "^/api": "/api"    // 意思是路径中包括  'api' ；请求接口路径 http://www.test.com/api/user/info;

               "^/api": "/api/interface"    // 意思是路径中匹配的api替换成  'api/interface' ；请求接口路径 http://www.test.com/api/interface/user/info;（当然可以替换成其他路径）
          }
      },
  },

}

代理多个，性质一样，并不常见（在一个应用中，有的后台接口域名不同，例如登录  是  http://www.login.com/user，请求用户信息的接口是 http://www.userinfo.com/getinfo）

  proxy: {

    '/api': {

      target: 'http://www.login.com/user',

      changeOrigin: true,

      pathRewrite: { '^/api': '' },

    },

    '/interface': {

      target: ' http://www.userinfo.com/getinfo',

      changeOrigin: true,

      pathRewrite: { '^/interface': '/interface' },

    }

}

在发送请求的时候

request({ url: 'api/search/home'})；实质上接口路径就是 http://www.login.com/user/search/home;

request({ url: 'interface/list'})；实质上接口路径就是http://www.userinfo.com/getinfo/interface/list;

2.CORS跨域（需要后台配合）；

3.JSONP，利用前端标签的自带跨域属性，script，style，image等