农副产品销售网站开发,评价一个网站设计的好坏,网站音乐播放器源码,深圳网站建_企业网站设计定制文章目录 概要web应用整体请求流程技术名词解释跨域问题产生的原理解决方案前端代码角度前端服务器角度后端代码角度后端服务器角度 小结 概要
在不成熟的前后端开发过程中#xff0c;经常遇到跨域问题#xff1b; 在前后端分离的模式下的开发过程中#xff0c;经常遇到跨域… 文章目录 概要web应用整体请求流程技术名词解释跨域问题产生的原理解决方案前端代码角度前端服务器角度后端代码角度后端服务器角度 小结 概要
在不成熟的前后端开发过程中经常遇到跨域问题 在前后端分离的模式下的开发过程中经常遇到跨域问题
本文章针对跨域问题提供几个有效的解决方案
web应用整体请求流程
前端给后端发ajax、aioxs中间要经过web服务器转手然后后端接收请求、处理、响应 有些情况下可能没有web服务器这一步这是一个闭环
技术名词解释
跨域Cross-Origin是指在Web开发中当前前端页面所在的域域名、协议、端口与请求的目标资源的域不一致时浏览器会阻止页面发起跨域请求。这是出于安全考虑以防止恶意网站获取用户的敏感信息或进行其他安全攻击。
跨域问题主要涉及到浏览器的同源策略Same-Origin Policy。同源策略要求网页只能从同一域的源加载资源不同源的资源请求将会受到限制。
具体而言同源策略包括以下几个方面
协议相同 两个页面的协议必须相同比如都是http或https。 域名相同 两个页面的域名必须相同包括主域名和子域名。 端口相同 两个页面的端口号必须相同。
跨域问题产生的原理
就是因为浏览器的同源策略导致前端通过浏览器发给后端的请求被浏览器阻止了。
解决方案
前端代码角度
如果你的前端是框架开发的前端代码里可以用代理的方式实现。比如 server: {proxy: {/common: {target: envs.VITE_API_BASE_URL,changeOrigin: true,secure: false,},/iot: {target: envs.VITE_API_BASE_URL,changeOrigin: true,secure: false,},/farm: {target: envs.VITE_API_BASE_URL,changeOrigin: true,secure: false,},/admin: {target: envs.VITE_API_BASE_URL,changeOrigin: true,secure: false,}},},前端服务器角度
可以在前端web服务器配置文件内写反代原理就是前端请求当前域名/api这样浏览器就不会报错前端web服务器接收到api的请求时去转发请求到后端服务器
server {listen 80;server_name your_domain.com; # 替换为你的域名location / {root /path/to/your/frontend/app; # 替换为你的前端应用的路径index index.html;try_files $uri $uri/ /index.html;}location /api/ {proxy_pass http://localhost:5000; # 替换为你的API服务器地址和端口proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection upgrade;proxy_set_header Host $host;proxy_cache_bypass $http_upgrade;}# 可以添加其他配置如SSL证书等根据实际需求
}
后端代码角度
// 允许任何来源访问
header(Access-Control-Allow-Origin: *);// 允许的请求方法
header(Access-Control-Allow-Methods: GET, POST, OPTIONS);// 允许的请求头字段
header(Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept);// 响应类型
header(Content-Type: application/json; charsetutf-8);// 如果是预检请求OPTIONS直接返回空响应体结束执行
if ($_SERVER[REQUEST_METHOD] OPTIONS) {header(HTTP/1.1 200 OK);exit();
}
有些框架比如laravel还支持中间价的优雅语法实现和这个代码大同小异可以自行百度
后端服务器角度
server {listen 80;server_name your_domain.com; # 替换为你的域名location / {# 允许任何来源访问add_header Access-Control-Allow-Origin *;# 允许的请求方法add_header Access-Control-Allow-Methods GET, POST, OPTIONS;# 允许的请求头字段add_header Access-Control-Allow-Headers Origin, X-Requested-With, Content-Type, Accept;# 响应类型add_header Content-Type application/json; charsetutf-8;# 可以添加其他配置如代理到后端应用等根据实际需求}# 可以添加其他配置如SSL证书等根据实际需求
}
小结
一个请求的发起到后端接收到后端响应这是一个闭环的流程在这个流程上的每一步都可以实现跨域问题的解决
