跨域代理

什么是同源策略？同源策略是指浏览器不允许不同源的网站之间访问请求其中的资源文件。但是script，link，src这三个不会受同源策略的限制。目前使用跨域的方式主要有Jsonp，前端正向代理，nginx反向代理，响应头设置CROS，以及中间件。

先主要介绍一下react以及vue中的配置代理，两者的配置基本一致。

react在脚手架下中的src目录下新建setupProxy.js文件

const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
  app.use(
    //遇见/api1前缀请求就会触发该请求代理配置
    createProxyMiddleware("/api1", {
      //请求转发地址
      target: "http://localhost:5000",
      //默认值false，控制服务器收到的请求头中host字段的值
      //false代表请求头中的host为本地请求路径
      //如果是true，那么就会变为服务器中路径，一般加上为好
      changeOrigin: true,
      //重写请求路径，将路径中的/api1给替换掉
      pathRewrite: {
        "^/api1": "",
      },
    }),
    createProxyMiddleware("/api2", {
      target: "http://localhost:5001",
      changeOrigin: true,
      pathRewrite: {
        "^/api2": "",
      },
    })
  );
};

vue在脚手架3新建vue.config.js文件

module.exports={
      devServe:{
           proxy("/api1", {
                    target: "http://localhost:5000",
                    changeOrigin: true,
                    pathRewrite: {
                    "^/api1": "",
                  },
          }),
       proxy("/api2", {
            target: "http://localhost:5001",
            changeOrigin: true,
           pathRewrite: {
           "^/api2": "",
        },
       })
     }
}

因为两者脚手架都是基于webpack的所以配置基本一样，react之前版本其实也是proxy，不过现在已经改了。

然后在介绍一下Jsonp,这种方式是通过script标签不受同源策略影响，在src请求路径中添加一个回调函数，服务器返回这个函数并将返回的数据作为参数包裹，前台就会自动调用已经定义好的这个回调函数。

let script=document.createElement('script');
script.setAttribute('src','http://localhost:3000?callback=handleCallback');  //服务器返回 ‘handleCallback('+data+')'
document.getElementByTagName('head')[0].append(script);
function handleCallback(msg)=>{//此处获取数据}

其次在介绍一下最简单的跨域方式设置响应头。

//express框架
res.setHeader('Access-Conteol-Allow-Origin','*') //允许所有访问
res.setHeader('Access-Control-Allow-credentials',true);//允许携带cookie

//springboot中controller中添加注解,maxAge表示超时时间
@CrosOrigin('*',maxAge=3600)
@CrosOrigin(origins={'第一个','第二个'},maxAge=3600)

好了，今天的记录就到这了。