Summary of 5 ways to handle JS cross-domain problem

Source: Internet
Author: User
Tags script tag

1.JSONP cross-Domain GET requests

Ajax request, datatype for JSONP. This form requires that the request be adjusted to return callback ([Json-object]) on the server side. If the server returns a normal JSON object. When debugging, in the Chrome browser console will be reported "uncaught syntaxerror:unexpected token" error, in the Firefox browser console will be reported "syntaxerror:missing; Before statement "error.

JSON is a lightweight data interchange format that, like XML , is used to describe between data.

JSONP is a Way to use JSON data, not a JSON object, but a JSON object that contains the JavaScript scripts.

Due to the limitations of the same Origin policy,XMLHttpRequestonly resources that request the current source (domain name, protocol, port) are allowed. It is not possible to cross-domain requests for security reasons, but we have found thatWebcalled on the pageJSfile is not affected by cross-domain, and has"src"The label for this property has the ability to cross-domain, such as<script>,,<iframe>, at this time, the Intelligent program Ape thought of the workaround, if you want to make cross-domain requests, by usingHTMLof theScripttag to make a cross-domain request and return theScriptcode, which can be used directlyJSONPassJavaScriptobject. Which is generated on the server side of the cross-domainJSONdata, and then packaged intoScriptThe script callback solves the problem of cross-domain access without breaking the restriction of the same-origin policy.

2.iframe cross-domain.

An IFRAME element is added to the page, and when a GET request needs to be called, the SRC is set to the URL of the GET request to initiate the call to the GET request.

var url = "http://xxx.xxx.xxx?p1=1&p2=2";
$ ("#iframe"). attr ("src", url);//cross-domain, using IFRAME

The IFRAME is stronger than JSONP, and can be used to implement JS calls across domains in addition to processing HTTP requests.

SRC attribute handling for 3.script elements

The src attribute of the IFRAME, IMG, style, script, and other elements can request resources directly to different domains, and JSONP is the simple implementation that uses the script tag to request resources across domains, so this is the same as the jsonp nature, which also requires a server-side request to return callback ... Form.

var url= "Http://xxx.xxx.xxx?p1=1";
var script = document.createelement (' script ');
Script.setattribute (' src ', url);
document.getElementsByTagName (' head ') [0].appendchild (script);

4. Use get processing on the server.

There is no hard-to-do business on the front-end processing, you can do a package on the service side, and then the server initiates the call, so that the cross-domain problem can be resolved. Then, depending on whether the request is issued or if the return value needs to be obtained, the code is determined to use synchronous or asynchronous mode.

private static void Creategethttpresponse (string url, int? timeout, string useragent, Cookiecollection cookie)
{
if (string. IsNullOrEmpty (URL))
{
throw new ArgumentNullException ("url");
}
var request = WebRequest.Create (URL) as HttpWebRequest;
Request. Method = "GET";
if (!string. IsNullOrEmpty (useragent))
{
Request. useragent = useragent;
}
if (timeout. HasValue)
{
Request. Timeout = timeout. Value;
}
if (cookie = null)
{
Request. Cookiecontainer = new Cookiecontainer ();
Request. Cookiecontainer.add (cookies);
}
Request. BeginGetResponse (null,null);//Async
Return request. GetResponse () as HttpWebResponse;
}

5.flash cross-domain

Too cutting-edge = =, and then study

Summary: The above 5 methods are common to solve the problem of JS cross-domain processing method, the final kind of high-end, and so I study clearly and then fill it up.

<script>

<iframe src>

Summary of 5 ways to handle JS cross-domain problem

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.