如何实现跨域

如何实现跨域

当浏览器执行JS脚本时,会检测脚本要访问的协议,域名,端口号是不是和当前网址一致,不一致就是跨域。

跨域是不允许的,这种限制叫做浏览器的同源策略,简单就是浏览器不允许一个源加载脚本与其他源中的资源进行交互,那如何实现呢?

前端跨域
1.JSONP方式

script、img、iframe、link、video、audio 等带有 src 属性的标签可以跨域请求和执行资源, JSONP 利用这一点"漏洞"实现跨域。

javascript 复制代码
<script>
 var scriptTag = document.createElement('script');
 scriptTag.type = "text/javascript";
 scriptTag.src = "http://10.10.0.101:8899/jsonp?callback=f";
 document.head.appendChild(scriptTag);
</script>

JSONP 实现跨域很简单但是只支持 GET 请求方式。而且在服务器端接受到 JSONP 请求后需要设置 请求头,添加 Access-Control-Allow-Origin 属性,属性值为 * ,表示允许所有域名访问,这样浏 览器才会正常解析,否则会报 406 错误。

javascript 复制代码
response.setHeader("Access-Control-Allow-Origin", "*");
2.webpack-dev-server

前端无论是vue项目还是react 项目大多数都会以webpack-dev-server 来运行,webpack-dev-server 可以设置代理,前端可以在开发环境设置代理解决跨域问题

复制代码
 proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: { '^/api': '' },
        changeOrigin: true,
      },
   }

vue-cli、create-react-app、umi 等脚手架找到webpack devserver配置位置配上即可。

注意: 只限在开发环境,生产环境需要web 服务器同样原理代即可。下面会说明怎么用。

后端解决方案
Http 协议CORS头

跨域其实也是http层面上可以解决的问题,后端解决也是比较简单的,也是项目常见的解决手法。

CORS (Cross-Origin Resource Sharing,跨域资源共享)是一个系统,它由一系列传输的HTTP头组成,这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应。

同源安全策略 默认阻止"跨域"获取资源。但是 CORS 给了web服务器这样的权限,即服务器可以选择,允许跨域请求访问到它们的资源。

  • Access-Control-Allow-Origin 指示请求的资源能共享给哪些域。

  • Access-Control-Allow-Credentials 指示当请求的凭证标记为 true 时,是否响应该请求。

  • Access-Control-Allow-Headers 用在对预请求的响应中,指示实际的请求中可以使用哪些 HTTP 头。

  • Access-Control-Allow-Methods 指定对预请求的响应中,哪些 HTTP 方法允许访问请求的资源。

  • Access-Control-Expose-Headers 指示哪些 HTTP 头的名称能在响应中列出。

  • Access-Control-Max-Age 指示预请求的结果能被缓存多久。

  • Access-Control-Request-Headers 用于发起一个预请求,告知服务器正式请求会使用那些 HTTP 头。

  • Access-Control-Request-Method 用于发起一个预请求,告知服务器正式请求会使用哪一种 HTTP 请求方法。

  • Origin 指示获取资源的请求是从什么域发起的

运维解决方案

运维解决我只会一点ngnix ,其他web 服务器就不说了,原理同webpack-dev-server 设置代理转发解决跨域问题。

步骤:

  • 前端和运维商量好协议路径代理规则,比如/api 代表域名

  • 前端配置webpack -dev -server 代理

  • 服务器利用ngnix 配置相同转发代理

    ...
    location /api {
    proxy_pass https://b.test.com; # 设置代理服务器的协议和地址
    }
    ...

相关推荐
A旧城以西1 分钟前
数据结构(JAVA)单向,双向链表
java·开发语言·数据结构·学习·链表·intellij-idea·idea
杉之19 分钟前
选择排序笔记
java·算法·排序算法
Billy Qin20 分钟前
Tree - Shaking
前端·javascript·vue.js
Naive_729 分钟前
蓝桥杯准备(前缀和差分)
java·职场和发展·蓝桥杯
月明长歌29 分钟前
Vue + Axios + Mock.js 全链路实操:从封装到数据模拟的深度解析
前端·javascript·vue.js·elementui·es6
头顶秃成一缕光1 小时前
若依——基于AI+若依框架的实战项目(实战篇(下))
java·前端·vue.js·elementui·aigc
冴羽yayujs1 小时前
SvelteKit 最新中文文档教程(17)—— 仅服务端模块和快照
前端·javascript·vue.js·前端框架·react
海石1 小时前
vue2升级vue3踩坑——【依赖注入】可能成功了,但【依赖注入】成功了不太可能
前端·vue.js·响应式设计
白露与泡影1 小时前
Java面试题及答案整理( 2025年 4 月最新版,持续更新)
java·开发语言
hunzi_12 小时前
选择网上购物系统要看几方面?
java·微信小程序·小程序·uni-app·php