Home > Developer > .Net Core

Cross-origin issue occurs in get request URLs in AngularJS. angularjsget

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Cross-origin issue occurs in get request URLs in AngularJS. angularjsget

This morning, I helped my students read an AngularJS issue, mainly because a cross-origin access occurred in the request and the request was blocked.

The Code she gave me is as follows:

<Html lang = "en" ng-app = "myApp"> 
Problems

We can see that the URL is accessed through the get method of $ http and cannot be accessed all the time. I printed the specific response to the console, which also caused a problem.


This is caused by cross-origin of the browser. I am not very clear about this in my previous studies. I only know that resources under this domain name that are not accessed under the same domain name will cause cross-origin. In fact, we can see that this is because the request format is incorrect and the returned json data cannot be reached.


The following is the data returned in json format.


According to the URL she gave me, I found that there is a callback in front of the json data. This is the callback function in php. As a result, I found on the Internet that the get request has no effect on this callback function.
Solution

The following method must be used to process data in the jsonp format with callback.


 



 


<Script> var myApp = angular. module ("App", []); myApp. controller ("test", function ($ scope, $ http) {// callback function usage myUrl = "http://datainfo.duapp.com/shopdata/getGoods.php? Callback = JSON_CALLBACK "; $ http. jsonp (myUrl). success (function (response) {console. log (response) ;}); </script>



Note:


 
    
 
  
  • Use $ http. jsonp () to request data. (The Cross-origin problem is solved)
    • 
 
  
  • Add the callback = JSON_CALLBACK character after the URL;
    • 

 


In this way, data can be accessed normally. In fact, if we want to know that there is an error in json format data, we can print it to the browser console so that we can see the specific process and results.
Complete code


<! DOCTYPE html> 


We will automatically replace our JSON_CALLBACK with the following characters, which should be replaced by AngularJS.


How to solve cross-origin:


Json is used to transmit data, and jsonp is used for cross-domain communication. json is a data exchange format, jsonp is an unofficial cross-domain data interaction protocol created by the ingenuity of developers;


How JSONP is generated:


  
    
 
   
  • A well-known problem is that Ajax directly requests common files without cross-domain access permissions. Render Manager determines that you are a static page, dynamic webpage, web Service, and WCF. As long as it is a cross-domain request, no permission is allowed;
    • 
 
   
  • However, we also found that when calling js files on the web page, it is not affected by cross-origin (In addition, we also found that all tags with the "src" attribute have cross-origin capabilities, for example, <script>, , and <iframe> );
    • 
 
   
  • Therefore, it can be determined that in the current stage, cross-Origin data access is only possible if you want to access data through pure web (ActiveX control, server proxy, Websocket that belongs to HTML5 in the future, that is to say, on the remote server, try to put data into js files for the client to call and further process;
    • 
 
   
  • It happens that we already know that there is a pure character data format called JSON that can describe complex data in a concise manner. Even better, JSON is also supported by js native, therefore, the client can process data in this format as needed;
    • 
 
   
  • In this way, the solution is ready. The web client uses the same method as the call script to call the js format files dynamically generated on the Cross-origin server (generally with the suffix of JSON). Obviously, the purpose of the server to dynamically generate a JSON file is to load the data required by the client.
    • 
 
   
  • After the client successfully calls the JSON file, it obtains the required data. The rest is to process and display the data as needed. This method of obtaining remote data looks like AJAX, but they are not the same.
    • 
 
   
  • To facilitate the use of data on the client, an informal transmission protocol is gradually formed, which is called JSONP. One of the main points of this Protocol is to allow users to pass a callback parameter to the server, then, when the server returns the data, the callback parameter is wrapped in JSON data as the function name, so that the client can customize its own function to automatically process the returned data.
    • 

  


Processing jsonp data in AngularJS


  
    
 
   
  • Use the $ http. jsonp () function to send requests;
    • 
 
   
  • Specify the callback and callback function names. When the function name is JSON_CALLBACK, the success function is called back. JSON_CALLBACK must be capitalized;
    • 
 
   
  • You can also specify other callback functions, but you must define global functions under the window;
    • 
 
   
  • Callback must be added to the URL;
    • 

  


The browser has a same-origin policy. At the global level, it prohibits page loading or executing any scripts in different domains from its own sources. JSONP is a security restriction that can bypass the browser, methods for requesting data from different domains;


This explanation is sufficient to understand the cross-origin issue and why JSONP is required?
Attachment:

Good water: http://www.cnblogs.com/dengzy/p/5388357.html


BestMe: http://www.cnblogs.com/BestMePeng/p/AngularJS_JSON.html


Segmentfault: https://segmentfault.com/q/1010000002407111

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
deadlock issue in sql server deep linking in angularjs components in angularjs dom in angularjs learn angularjs in day no jira issue found in commit message custom directive in angularjs
Related Article
asp.net Core Data protection (the data Protection cluster sce...
asp.net core-authorize characteristics
Micro-service Monitoring zipkin+asp.net core
ASP. net mvc creates 404 jump instances (not 302 and 200), mv...
Comparison between Orchard and ABP architectures (aspnetboile...

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More