跨域方案的抉择

前言

遇到跨域问题的时候,到底是使用CORS来解决,还是使用代理呢?

判断依据不是技术层面,而是你的生产环境。

首先要关注的是生产环境里面到底是一种什么样的情况,到底有没有跨域,然后根据生产环境的情况,来决定开发环境到底使用什么样的方案。

具体的几种场景

1


前端代码打包完成之后上传到静态资源服务器,通过某一个域名a.com去访问,然后访问过程中可能会运行一些JS,然后里面有些ajax,然后要去请求一些数据资源,如果数据服务器的访问域名是b.com就说明在a.com里面访问了b.com,引发了跨域,即生产环境有跨域问题。不用考虑开发环境就考虑生产环境怎么解决,这种情况生产环境就只能使用JSONP(很少用)、CORS来解决。所以意味着开发环境也只能使用CORS,要是开发环境搞个代理是能解决,但是一上线就报错。

这样的话,在开发环境搭建一个类似的场景就好,比如用vue,react开发,本地服务器,一个dev-server通过localhost:8080去访问,静态资源,页面,JS,然后本地测试服务器在另一个地址,就引发了跨域,这个时候就不能使用代理,要使用CORS(后端解决)。

2


开发完后打包上传到一个静态资源目录,然后后端服务搭建好了一个服务器,但是两者中间,夹了一个反向代理,意味着用户在请求的时候,往往使用同一个域名比方说a.com可得到静态资源的首页,但是如果请求的地址是a.com/api/xxx,就被代理服务器转发到了数据服务器,也就意味着页面是a.com这样,ajax请求是a.com/api/xxx这样,生产环境就没有跨域,生产环境没有跨域的话,就不需要后端使用CORS。

所以开发环境怎么解决呢,得搞一个跟生产环境差不多的结构出来。这时候就可以给前端的开发服务器配上代理功能,在脚手架里配。就可以通过同样的地址去访问,不需要后端使用CORS,前端去解决就好了。

所以跨域到底是前端解决还是后端解决,取决于生产环境。
了解这些后,跟后端吵架就有一些依据了哈哈哈哈哈

JSONP

javascript 复制代码
// www.aaa.com网页
<script>
	window.onSuccess = function(data) {
		console.log(data)
	}
</script>
<script src="https://www.bbb.com/api/getData"></script>
javascript 复制代码
// https://www.bbb.com/api/getData 返回了一段字符串
'onSuccess({errno:0, data: {/*数据内容*/}})'

因为返回的字符串在script中,所以会执行

CORS

javascript 复制代码
// CORS配置允许跨域 (服务端)
response.setHeader("Access-Control-Allow-Origin", "http://localhost:8081") // 或者 '*'
response.setHeader("Access-Control-Allow-Headers", "X-Requested-With")
response.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS")
response.setHeader("Access-Control-Allow-Credentials", "true") // 允许跨域接收cookie

"多余"的options请求

干嘛用的???跨域请求之前的预检查,浏览器自行发起的,不影响实际功能

相关推荐
PanZonghui2 分钟前
用项目说话:我的React博客构建成果与经验复盘
前端·react.js·typescript
挽淚4 分钟前
JavaScript 数组详解:从入门到精通
javascript
言兴5 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte9 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常10 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常12 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
ccc101816 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端
南篱17 分钟前
JavaScript 中的 this 关键字:从迷惑到精通
javascript
Struggler28123 分钟前
Chrome插件开发
前端
前端 贾公子35 分钟前
Monorepo + vite 怎么热更新
前端