跨域问题解决方案

为什么会出现跨域问题

由于浏览器的同源策略，导致我们在日常开发或者上线部署的时候会出现跨域问题。

同源策略：协议、域名、端口在不相同的情况下，由于浏览器的安全策略，或导致跨域问题。

如何解决跨域

常用的解决跨域问题的解决方案：

1. jsonp
2. nginx反向代理
3. webpack devServer代理
4. cors跨源资源共享

其中jsonp由于其局限性，以及对比其他方案的效果。此处不做介绍。

nginx方向代理

nginx反向代理常用在开发环境及线上环境。通过拦截转发请求来处理跨域问题。

假如现在前端项目运行在8080端口，而实际后端项目的地址为https://1.1.1.1:9000，需要拦截前缀为api的请求，此时nginx配置为

server {
    listen      8080 default_server;
    location /api {
        proxy_pass https://1.1.1.1:9000;
    }
}

假如现在有个接口为/api/test,在没有做转发前为http://localhost:8080/api/test,实际接口位置为https://1.1.1.1:9000/api/test.结果转发为实际接口位置。

webpack devserver代理

webpack devserver代理用在开发环境。

配置如下

devServer({
    proxy: {
        '/api': {
            target: 'https://1.1.1.1:9000',
            changeOrigin: true,
            pathRewrite: { '^/api': 'api' },
        },
    }
})

cors跨源资源共享

跨源资源共享 (CORS) （或通俗地译为跨域资源共享）是一种基于HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它origin（域，协议和端口），这样浏览器可以访问加载这些资源。

Access-Control-Allow-Origin: 'xxx'

可以通过服务端设置Access-Control-Allow-Origin字段的白名单来处理跨域问题。

如果在此情况下，发送请求时需要带上cookie的话，则需要配置Access-Control-Allow-Credentials,同时客户端需要同步设置xhr.withCredentials = true;,两者缺一不可