搜索
首页后端开发php教程javascript - 前后端分离中碰到跨域问题大家是怎么解决的?

目前我在我的博客的时候,考虑到使用前后端分离,将前端和后端逻辑单独放在两个版本库,部署在两台服务器上。

我的主域名为: godtail.cn(目前使用ghost,新的博客正在写...)

  • 前端域名为: www.godtail.cn | godtail.cn | m.godtail.cn

  • 后端域名为: api.godtail.cn

但是在通信的时候发现,提示跨域了,好吧,我之前以为在主域名相同情况下不会跨域(同域名不同端口也会跨域)。

目前我知道的可以解决的方法有两种:

  1. 使用JSONP,说实在我不是特别喜欢使用JSONP,感觉会导致安全问题,或者效率下降(这两点仅是我的猜测)。
    猜测的理由:

    • 任何来源都能访问, 会不会存在js注入?

    • 后端和前端需要都JSONP进行处理。(写起来不爽,而且是所有请求都要使用JSONP)。

  2. 在后端添加跨域头

    • 如果前端域名比较多,需要添加很多域名,需要维护。如果别的系统需要请求你的接口,添加进跨域头?不好处理...

大家有没有更好一点的解决方法?

================【 9-22 17:25 】======================

补充下,设置跨域头,可以设置ip,仅供自己内部调用还是可以的。如果需要外部调用的话,就满足不了,另外不确定有没有老版本浏览器兼容问题。

回复内容:

目前我在我的博客的时候,考虑到使用前后端分离,将前端和后端逻辑单独放在两个版本库,部署在两台服务器上。

我的主域名为: godtail.cn(目前使用ghost,新的博客正在写...)

  • 前端域名为: www.godtail.cn | godtail.cn | m.godtail.cn

  • 后端域名为: api.godtail.cn

但是在通信的时候发现,提示跨域了,好吧,我之前以为在主域名相同情况下不会跨域(同域名不同端口也会跨域)。

目前我知道的可以解决的方法有两种:

  1. 使用JSONP,说实在我不是特别喜欢使用JSONP,感觉会导致安全问题,或者效率下降(这两点仅是我的猜测)。
    猜测的理由:

    • 任何来源都能访问, 会不会存在js注入?

    • 后端和前端需要都JSONP进行处理。(写起来不爽,而且是所有请求都要使用JSONP)。

  2. 在后端添加跨域头

    • 如果前端域名比较多,需要添加很多域名,需要维护。如果别的系统需要请求你的接口,添加进跨域头?不好处理...

大家有没有更好一点的解决方法?

================【 9-22 17:25 】======================

补充下,设置跨域头,可以设置ip,仅供自己内部调用还是可以的。如果需要外部调用的话,就满足不了,另外不确定有没有老版本浏览器兼容问题。

当然是后端添加 Access-Control-Allow-Origin
至于你说的前端域名过多的问题,让后端用点小技巧能处理好的,不麻烦
思路:为 Access-Control-Allow-Origin 添加目标域名 (Origin 请求头) 而不是写死的域名或 *

大概实现 (伪代码):

<code>// 允许跨域访问的域名数组
string[] allowOrigins = 
{
    "http://www.godtail.cn/", 
    "http://godtail.cn/", 
    "http://m.godtail.cn/",
};

// 判断 origin 是否是自己的前端域名,如果是则添加
if(allowOrigins.Count(x => x.Contains(Request.Headers["Origin"])) > 0)
    Response.Header.Add("Access-Control-Allow-Origin", Request.Headers["Origin"]);</code>

不过话又说回来 请求头都是可以模拟的 所以建议将接口请求参数加密 前端脚本压缩混淆
参考网易云音乐的接口加密吧(去抓下包看看)

考虑下在后端添加跨域头,允许所有域名,然后在代码里过滤域名,不符合要求的域名直接返回 404。

nginx反向代理... 原来你自问自答了...

在服务器端设置头部 'Access-Control-Allow-Origin:*';

楼上说的这个。可以指定访问的 地址吧~

在前端代码不输的服务器进行域名转发

跨域头不是可以写成正则的形式吗

我采用的第一种方式,jsonp,callback,要是这种请求多了,写起来也麻烦;
第二种方式,试了一下不好用啊,是在response上设置Access-Control-Allow-Origin..*?

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
哪些常见问题会导致PHP会话失败?哪些常见问题会导致PHP会话失败?Apr 25, 2025 am 12:16 AM

PHPSession失效的原因包括配置错误、Cookie问题和Session过期。1.配置错误:检查并设置正确的session.save_path。2.Cookie问题:确保Cookie设置正确。3.Session过期:调整session.gc_maxlifetime值以延长会话时间。

您如何在PHP中调试与会话相关的问题?您如何在PHP中调试与会话相关的问题?Apr 25, 2025 am 12:12 AM

在PHP中调试会话问题的方法包括:1.检查会话是否正确启动;2.验证会话ID的传递;3.检查会话数据的存储和读取;4.查看服务器配置。通过输出会话ID和数据、查看会话文件内容等方法,可以有效诊断和解决会话相关的问题。

如果session_start()被多次调用会发生什么?如果session_start()被多次调用会发生什么?Apr 25, 2025 am 12:06 AM

多次调用session_start()会导致警告信息和可能的数据覆盖。1)PHP会发出警告,提示session已启动。2)可能导致session数据意外覆盖。3)使用session_status()检查session状态,避免重复调用。

您如何在PHP中配置会话寿命?您如何在PHP中配置会话寿命?Apr 25, 2025 am 12:05 AM

在PHP中配置会话生命周期可以通过设置session.gc_maxlifetime和session.cookie_lifetime来实现。1)session.gc_maxlifetime控制服务器端会话数据的存活时间,2)session.cookie_lifetime控制客户端cookie的生命周期,设置为0时cookie在浏览器关闭时过期。

使用数据库存储会话的优点是什么?使用数据库存储会话的优点是什么?Apr 24, 2025 am 12:16 AM

使用数据库存储会话的主要优势包括持久性、可扩展性和安全性。1.持久性:即使服务器重启,会话数据也能保持不变。2.可扩展性:适用于分布式系统,确保会话数据在多服务器间同步。3.安全性:数据库提供加密存储,保护敏感信息。

您如何在PHP中实现自定义会话处理?您如何在PHP中实现自定义会话处理?Apr 24, 2025 am 12:16 AM

在PHP中实现自定义会话处理可以通过实现SessionHandlerInterface接口来完成。具体步骤包括:1)创建实现SessionHandlerInterface的类,如CustomSessionHandler;2)重写接口中的方法(如open,close,read,write,destroy,gc)来定义会话数据的生命周期和存储方式;3)在PHP脚本中注册自定义会话处理器并启动会话。这样可以将数据存储在MySQL、Redis等介质中,提升性能、安全性和可扩展性。

什么是会话ID?什么是会话ID?Apr 24, 2025 am 12:13 AM

SessionID是网络应用程序中用来跟踪用户会话状态的机制。1.它是一个随机生成的字符串,用于在用户与服务器之间的多次交互中保持用户的身份信息。2.服务器生成并通过cookie或URL参数发送给客户端,帮助在用户的多次请求中识别和关联这些请求。3.生成通常使用随机算法保证唯一性和不可预测性。4.在实际开发中,可以使用内存数据库如Redis来存储session数据,提升性能和安全性。

您如何在无状态环境(例如API)中处理会议?您如何在无状态环境(例如API)中处理会议?Apr 24, 2025 am 12:12 AM

在无状态环境如API中管理会话可以通过使用JWT或cookies来实现。1.JWT适合无状态和可扩展性,但大数据时体积大。2.Cookies更传统且易实现,但需谨慎配置以确保安全性。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器