search
HomeBackend DevelopmentPHP Tutorialjavascript - How do you solve cross-domain problems when separating front-end and back-end?

Currently when I am working on my blog, I consider using front-end and back-end separation, placing the front-end and back-end logic in two separate repositories and deploying them on two servers.

My main domain name is: godtail.cn (currently using ghost, new blog is being written...)

  • The front-end domain name is: www.godtail.cn | godtail.cn | m.godtail.cn

  • The backend domain name is: api.godtail.cn

But when communicating, I found that it prompted Cross-domain. Well, I thought it would not cross-domain when the main domain name was the same (the same domain name and different ports would also cross-domain).

Currently, there are two solutions that I know of:

  1. Use JSONP. To be honest, I don’t particularly like using JSONP. I feel that it will cause security problems or reduce efficiency (these two points are just my guesses).
    Reason for guessing:

    • It can be accessed from any source. Is there any js injection?

    • Both the backend and the frontend need JSONP for processing. (It’s not pleasant to write, and all requests must use JSONP).

  2. Add cross-domain header in backend

    • If there are many front-end domain names, many domain names need to be added and maintained. If other systems need to request your interface, add a cross-domain header? Not easy to deal with...

Does anyone have a better solution?

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

In addition, if you set the cross-domain header, you can set the IP, which is only for internal calls. If external calls are required, it will not be satisfied. In addition, I am not sure if there are any compatibility issues with older versions of browsers.

Reply content:

Currently when I am working on my blog, I consider using front-end and back-end separation, placing the front-end and back-end logic in two separate repositories and deploying them on two servers.

My main domain name is: godtail.cn (currently using ghost, new blog is being written...)

  • The front-end domain name is: www.godtail.cn | godtail.cn | m.godtail.cn

  • The backend domain name is: api.godtail.cn

But when communicating, I found that it prompted Cross-domain. Well, I thought it would not cross-domain when the main domain name was the same (the same domain name and different ports would also cross-domain).

Currently, there are two solutions that I know of:

  1. Use JSONP. To be honest, I don’t particularly like using JSONP. I feel that it will cause security problems or reduce efficiency (these two points are just my guesses).
    Reason for guessing:

    • It can be accessed from any source. Is there any js injection?

    • Both the backend and the frontend need JSONP for processing. (It’s not pleasant to write, and all requests must use JSONP).

  2. Add cross-domain header in backend

    • If there are many front-end domain names, many domain names need to be added and maintained. If other systems need to request your interface, add a cross-domain header? Not easy to deal with...

Does anyone have a better solution?

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

In addition, if you set the cross-domain header, you can set the IP, which is only for internal calls. If external calls are required, it will not be satisfied. In addition, I am not sure if there are any compatibility issues with older versions of browsers.

Of course, the backend adds Access-Control-Allow-Origin
As for the problem of too many front-end domain names you mentioned, let the backend use some tricks to handle it without any trouble
Thought: for Access-Control- Allow-Origin adds the target domain name (Origin request header) instead of a hard-coded domain name or *

Approximate implementation (pseudocode):

<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>

But then again, request headers can be simulated, so it is recommended to encrypt the interface request parameters and compress and obfuscate the front-end scripts
Refer to the interface encryption of NetEase Cloud Music (go grab the package and take a look)

Consider adding a cross-domain header to the backend to allow all domain names, and then filter the domain names in the code. Domain names that do not meet the requirements will directly return 404.

nginx reverse proxy... It turns out you asked and answered your own question...

Set the header 'Access-Control-Allow-Origin:*' on the server side;

This is what I mentioned above. You can specify the access address~

Forward domain name on a server that does not lose front-end code

Can’t the cross-domain header be written in regular form?

The first method I adopted, jsonp, callback, if there are too many such requests, it will be troublesome to write;
The second method, it didn’t work after I tried it, is to set Access-Control-Allow- on the response Origin..*?

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Explain the concept of session locking.Explain the concept of session locking.Apr 29, 2025 am 12:39 AM

Sessionlockingisatechniqueusedtoensureauser'ssessionremainsexclusivetooneuseratatime.Itiscrucialforpreventingdatacorruptionandsecuritybreachesinmulti-userapplications.Sessionlockingisimplementedusingserver-sidelockingmechanisms,suchasReentrantLockinJ

Are there any alternatives to PHP sessions?Are there any alternatives to PHP sessions?Apr 29, 2025 am 12:36 AM

Alternatives to PHP sessions include Cookies, Token-based Authentication, Database-based Sessions, and Redis/Memcached. 1.Cookies manage sessions by storing data on the client, which is simple but low in security. 2.Token-based Authentication uses tokens to verify users, which is highly secure but requires additional logic. 3.Database-basedSessions stores data in the database, which has good scalability but may affect performance. 4. Redis/Memcached uses distributed cache to improve performance and scalability, but requires additional matching

What is the full form of PHP?What is the full form of PHP?Apr 28, 2025 pm 04:58 PM

The article discusses PHP, detailing its full form, main uses in web development, comparison with Python and Java, and its ease of learning for beginners.

How does PHP handle form data?How does PHP handle form data?Apr 28, 2025 pm 04:57 PM

PHP handles form data using $\_POST and $\_GET superglobals, with security ensured through validation, sanitization, and secure database interactions.

What is the difference between PHP and ASP.NET?What is the difference between PHP and ASP.NET?Apr 28, 2025 pm 04:56 PM

The article compares PHP and ASP.NET, focusing on their suitability for large-scale web applications, performance differences, and security features. Both are viable for large projects, but PHP is open-source and platform-independent, while ASP.NET,

Is PHP a case-sensitive language?Is PHP a case-sensitive language?Apr 28, 2025 pm 04:55 PM

PHP's case sensitivity varies: functions are insensitive, while variables and classes are sensitive. Best practices include consistent naming and using case-insensitive functions for comparisons.

How do you redirect a page in PHP?How do you redirect a page in PHP?Apr 28, 2025 pm 04:54 PM

The article discusses various methods for page redirection in PHP, focusing on the header() function and addressing common issues like "headers already sent" errors.

Explain type hinting in PHPExplain type hinting in PHPApr 28, 2025 pm 04:52 PM

Article discusses type hinting in PHP, a feature for specifying expected data types in functions. Main issue is improving code quality and readability through type enforcement.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

SecLists

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.