理解同源，理解同源策略-----解决set-cookie字段失效问题

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

最近在帮同学写毕业设计的时候，由于项目使用的是现成的api，那么本地调用登录时，如果需要存cookie正常是不允许的，而这里就触及到跨域的知识，而一般完善的接口，信息都会存cookie，而有时没发现问题，在调用接口就会不明所以。

---

一、同源策略是什么？

1、 什么是源，怎么理解同源

源一般指的是protocol（协议）+port（端口）+host（主机），而同源这是protocol，port，host相同，则代表你们是同源的。

2. 为什么会有同源策略？

不希望一个源和另一个源有太多的交互。
允许修改dom
不允许获取远程图片内容，因为图片有可能是用代码编写而成的图片，可以用脚本解析。
不允许网站提交数据到不同源服务器
不允许网站提交cookie到不同源的服务器

二、CORS是什么？

既然说到通过http请求去存储cookie，那么浏览器肯定在这方面做了安全措施，总不能说你随便一个请求就能往里面写cookie把，所以说这就谈到了CORS这个概念。

跨域资源共用（CORS）

一般前端会加个node层代理
跨域资源共用（Cross-Origin Resource Sharing) 使用额外的HTTP头允许指定资源和另一个源进行交互，也就是说我通过在头部加一个字段，然后允许这个字段中出现的域名去访问我的资源。

Access-Control-Allow-Origin：https:a.com

一般请求流程

1. 发出请求，带上请求头
2. 返回真实数据

预检

1. a发出OPTIONS的头部，并且会准备带上一些头部
2. b收到请求，就会去看自己支不支持这个同源策略
3. 发出请求，带上请求头，
4. b返回真实数据。

缺点

因为预检也是一个请求所以会消耗带宽，消耗请求。

代理服务

所以我们前端会通过代理将不同源的资源代理到同源的资源里中间加一个代理层，带来的问题就是交互链加长了。

二、请求并带上cookie

假定我们现在要连的后端把改做的也做了，跨域请求也开了，那么我们其实已经可以去访问这个接口了，虽然说访问这个接口返回什么的都正常，但是说在请求完成后打开控制台发现cookie空空如也。我们具体分析一下这个问题,但此时仔细看请求的响应头就能发现问题所造。

这里看到一个问题，大概就是要你请求同源，那么我们该如何让请求同源，那么我该怎么去同源呢，那我们就选择最常规的代理服务去同源，这样黑名单的接口也可以拿到我们的cookie。

代理跨域

这里我已 vue/cli做一个演示示范。
在vue.config.js(app.vue同级的文件)

const { defineConfig } = require('@vue/cli-service')
// import { defineConfig } from '@vue/cli-service'
console.log(defineConfig)
module.exports = defineConfig({
	transpileDependencies: [],
	devServer: {
		proxy: {
			'/api': {
				target: 'https://autumnfish.cn',
				ws: true,
				changeOrigin: true,
				pathRewrite: {
					'^/api': '',
				},
			},
		},
	},
})

如果说你用的是vite或者create react的话，vite可以在vite.config.js配置，reactt的话可以下载一个插件去改webpack配置@rescripts/cli，通过一个插件去不直接修改webpack的情况下就可以进行部分配置。具体怎么配devserver可以参看官网文档。

我使用的是axios，前端请求时还要加一个字段，通过这一个方法配置字段axios.defaults.withCredentials = true。

---

总结

通过一个setcookie这一个字段的存储问题，了解到了同源是什么，顺便了解了一下CORS。