Content: Introduction to Cross-Origin Requests and Cross-Origin Solutions
What is Cross-Origin?
Cross-Origin refers to a situation where a web page at one domain tries to access resources from a different domain. This is restricted by browsers due to security concerns.
The key factors for determining Cross-Origin are differences in port, domain name, and protocol. If any of these factors are not the same, the request is considered Cross-Origin, and browsers impose security restrictions, preventing the access of resources from a different domain.
Cross-Origin with the Same Main Domain
To resolve Cross-Origin issues when the main domain is the same, you can set the document.domain
property to the same value in both pages.
1 | <script> |
JSONP for Cross-Origin Access
First Method: Use jQuery’s AJAX with the dataType: jsonp
property.
When dataType: jsonp
is set, jQuery sends the request using JSONP.
1 | $.ajax({ |
To modify the default callback parameter name and the name of the callback function, use:
1 | jsonp: "cb", // Modify the callback parameter name (default is "callback") |
Second Method: Simulate JSONP using low-level JavaScript to make a Cross-Origin request.
JSONP Principle:
JSONP sends a request by dynamically creating a script
tag.
- Create a
script
tag dynamically to send the request. - Pass a callback function name to the server, usually named “callback”.
- Define a global callback function on the client.
- The server responds by calling the callback function and passing the response data as a parameter.
Browsers have Cross-Origin restrictions on the XMLHttpRequest object but not on the script
tag.
1 | // Define a global callback function |
1 |
|
CORS (Cross-Origin Resource Sharing)
CORS stands for Cross-Origin Resource Sharing.
To enable CORS, set the response header “Access-Control-Allow-Origin” to specify which domains are allowed to access the resource.
1 |
|
1 | var xhr = new XMLHttpRequest(); |
Differences Between JSONP and CORS
JSONP | CORS |
---|---|
Supports only GET | Supports both GET and POST |
Limited data size | Can handle larger data |
Supports older browsers | Does not support older browsers |
Other Cross-Origin Solutions
- Use a reverse proxy to solve Cross-Origin issues.
- Use Flash plugins to handle Cross-Origin requests.