ajax跨域例子

時間 2019-12-04

標籤 ajax 例子欄目 Ajax 简体版

原文原文鏈接

例子

https://github.com/ruanyf/react-demos/blob/master/demo12/index.htmljavascript

此網頁代碼運行在本地，是能夠訪問 github 數據的。是因爲 github 網站開啓的 ajax 跨域訪問能力。html

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="UTF-8" />
 5     <script src="../build/react.development.js"></script>
 6     <script src="../build/react-dom.development.js"></script>
 7     <script src="../build/babel.min.js"></script>
 8     <script src="../build/jquery.min.js"></script>
 9   </head>
10   <body>
11     <div id="example"></div>
12     <script type="text/babel">
13       class RepoList extends React.Component {
14         constructor(props) {
15           super(props)
16           this.state = {
17             loading: true,
18             error: null,
19             data: null
20           };
21         }
22 
23         componentDidMount() {
24           this.props.promise.then(
25             value => this.setState({loading: false, data: value}),
26             error => this.setState({loading: false, error: error}));
27         }
28 
29         render() {
30           if (this.state.loading) {
31             return <span>Loading...</span>;
32           }
33           else if (this.state.error !== null) {
34             return <span>Error: {this.state.error.message}</span>;
35           }
36           else {
37             var repos = this.state.data.items;
38             var repoList = repos.map(function (repo, index) {
39               return (
40                 <li key={index}><a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}</li>
41               );
42             });
43             return (
44               <main>
45                 <h1>Most Popular JavaScript Projects in Github</h1>
46                 <ol>{repoList}</ol>
47               </main>
48             );
49           }
50         }
51       }
52 
53       ReactDOM.render(
54         <RepoList promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />,
55         document.getElementById('example')
56       );
57     </script>
58   </body>
59 </html>

顯示內容：java

ajax跨域訪問限制放開

https://www.zhihu.com/question/26376773react

跨域資源共享

CORS是一個W3C標準，全稱是」跨域資源共享」（Cross-origin resource sharing）。對於這個方式，阮一峯老師總結的文章特別好，但願深刻了解的能夠看一下http://www.ruanyifeng.com/blog/2016/04/cors.html。jquery

這裏我就簡單的說一說大致流程。git

對於客戶端，咱們仍是正常使用xhr對象發送ajax請求。
惟一須要注意的是，咱們須要設置咱們的xhr屬性withCredentials爲true，否則的話，cookie是帶不過去的哦，設置： xhr.withCredentials = true;

對於服務器端，須要在 response header中設置以下兩個字段:
Access-Control-Allow-Origin: http://www.yourhost.com
Access-Control-Allow-Credentials:true
這樣，咱們就能夠跨域請求接口了。

抓包分析

對於發起的ajax請求，存在響應頭 Access-Control-Allow-Origin：*github

1. ajax跨域例子
2. ajax 跨域 headers JavaScript ajax 跨域請求
3. ajax及ajax跨域
4. JavaScript之Ajax-7 Ajax跨域請求(Ajax跨域概述、Ajax跨域實現)
5. JSONP跨域請求例子
6. Ajax及跨域
7. ajax 跨域
8. ajax跨域-CORS
9. AJAX跨域
10. ajax跨域
更多相關文章...
• PHP 實例 - AJAX 與 XML - PHP教程
• AJAX 數據庫實例 - ASP 教程
• PHP Ajax 跨域問題最佳解決方案
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。