跨域、携带cookie、没有登录态及refer等问题合集

这是我参与「掘金日新计划 · 4 月更文挑战」的第 8 天，点击查看活动详情

本文主要阐述前端开发过程中常见的前后端交互上的问题，包括常见的跨域问题，需要携带cookie问题，以及服务端进行了refer限制的问题，说明了常见的解决方案。

跨域

现象：

如果前端不自己做服务器代理，那么需要服务端开启允许跨域：

"Access-Control-Allow-Origin", "*"

携带cookie

但是如果请求之前需要登录，而前端的请求需要绕过登录，那么就需要登录态，一般是需要携带tookie，这需要服务端修改配置：

 Access-Control-Allow-origin= '前端请求IP地址（如果有端口带上端口）' // 不能为 * 否则跨域不生效
 Access-Control-Allow-Credentials = true

同时如果使用的是axios，那么需要配置携带tookie：

import axios from 'axios'; // 引入axios
axios.defaults.withCredentials = true; // 允许携带cookie

携带后的效果：

携带的则是Application/Cookie中的内容：

也可以在当前页面的控制台进行查看：

浏览器对于cookie的限制

但在较新的浏览器中还是会遇到问题:

而这是为了防止CSRF攻击。谷歌要求你setCookie 设置 SameSite=None 才能在 axios上使用cookie。

解决：

网站可以选择显式关闭SameSite属性，将其设为None。不过，前提是必须同时设置Secure属性（Cookie 只能通过 HTTPS 协议发送），否则无效。

Set-Cookie: widget_session=abc123; SameSite=None; Secure

使用代理处理跨域

在需要cookie的请求下真的非常麻烦，难以处理，这时候最简单的方式是前端配置代理服务器进行转发。常用的代理服务器有两种方式，一是使用nginx进行反向代理，但是这种方式是将前端的请求直接转发给服务端，还是会遇到 SameSite 的问题，所以最好的方式是使用node开启代理服务器。

1.使用 vue-cli提供的选项：

vue.config.js

module.exports = {
    devServer: {
        https: false,
        proxy:{
            '/' :{
                target: 'https://manager-test.gzt.mypaas.com/',
                changeOrigin: true,
            }
        }
    }
}

2.使用第三方中间件http-proxy-middleware

const {createProxyMiddleware} = require('http-proxy-middleware');
module.exports = function (app) {
    app.use('/httpServer', createProxyMiddleware({
        target: 'http://10.0.0.0：8080',//后台服务器地址
        changeOrigin: true, // 将主机的源更改为目标URL，默认为 false

        pathRewrite: {
            '^/httpServer': 'http://localhost:3000',//本地地址
        },
    }))
}

以上代理配置将会匹配所有以 /httpServer 开始的路径。并将服务器 ‘http://10.0.0.0：8080’ 上面的 ‘/httpServer’ 请求代理到本地’http://localhost:3000’。

refer限制

如果使用了代理还是不能成功获取数据，那么就要考虑是否服务端进行了refer限制，对请求的url进行了限制。

示例：

如果是这种情况，请求状态为200，并且没有任何关于跨域问题的报错，那么极有可能是因为服务端对请求来源进行了限制，例如 work-test.gzt.mypaas.com/ 只允许 work-test.gzt.mypaas.com/ 的url进行请求，那么本地即使使用代理也无济于事。这就必须后端对refer限制进行处理。