You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
1.3 KiB
52 lines
1.3 KiB
# Javascript - Cross Site AJAX
|
|
|
|
## Lesson Objectives
|
|
|
|
1. Explain Cross Site AJAX
|
|
1. Explain CORS
|
|
1. Explain Proxy Server
|
|
1. Explain JSONP
|
|
|
|
## Explain Cross Site AJAX
|
|
|
|
By default it's considered insecure to make an AJAX request to a different site
|
|
```javascript
|
|
$http({
|
|
method: 'GET',
|
|
url: 'https://status.github.com/api/status.json',
|
|
}).then(
|
|
function(response){
|
|
|
|
},
|
|
function(response){
|
|
|
|
}
|
|
);
|
|
```
|
|
|
|
## Explain CORS
|
|
|
|
- new way of doing this
|
|
- in headers of html, server decides who can access this data
|
|
- if correct headers are present, browser knows it's secure to view the data
|
|
1. http://www.omdbapi.com/?s=pirates&r=json
|
|
1. `Access-Control-Allow-Origin:*`
|
|
|
|
## Explain Proxy Server
|
|
|
|
- have your sever make a request to the foreign API and then return the results
|
|
- you can then hit your own API and it will be the same origin
|
|
|
|
## Explain JSONP
|
|
|
|
- old way of getting around this
|
|
- add a script tag to the service
|
|
- pass your custom callback function in as a GET param
|
|
- inside other site's script tag, it calls your function and passes in its data
|
|
```html
|
|
<!-- Request sent via a script tag -->
|
|
<script src="https://status.github.com/api/status.json?callback=apiStatus"></script>
|
|
<!-- Data received during execution of this predefined function. -->
|
|
<script> function apiStatus(data) { console.log(data); } </script>
|
|
```
|