2021-11-08-ajax跨域问题笔记

最新推荐文章于 2023-04-18 12:00:29 发布

xuyoujia1991

最新推荐文章于 2023-04-18 12:00:29 发布

阅读量782

点赞数

分类专栏：生活技术文章标签： ajax javascript ecmascript

本文链接：https://blog.youkuaiyun.com/xuyoujia1991/article/details/121273485

版权

技术同时被 2 个专栏收录

20 篇文章

订阅专栏

生活

9 篇文章

订阅专栏

ajax跨域问题

通过ajax访问“http://www.kuaidi100.com/query”，浏览器报错：

Access to XMLHttpRequest at ‘http://www.kuaidi100.com/query?type=zhongtong&postid=78237558620256’ from origin ‘null’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

GET http://www.kuaidi100.com/query?type=zhongtong&postid=78237558620256 net::ERR_FAILED

getStoreList = function(userId){
    $.ajax({ 
        type: "GET", 
        data: "type=zhongtong&postid=78237558620256",
        dataType: "JSON", 
        headers:{'Content-Type':'application/json;charset=utf8'},
        async: false, 
        url: "http://www.kuaidi100.com/query",
        success: function(data) {
            if (data.status == 'ok') {
                    console.log(data);
                } else {
                    console.log(data.text);
                }
        }
        
    });
}

禁止跨域政策（CORS policy）：

如果A站在域名a.com页面的JavaScript调用B站b.com的API时，将被浏览器拒绝访问，因为不满足同源策略；
如果A站在域名a.com页面的JavaScript调用A站自己的API时，没有问题。

那就是CORS，全称Cross-Origin Resource Sharing，翻译过来就是：跨来源资源共享

是HTML5规范定义的如何跨域访问资源。如果A站的JavaScript访问B站API的时候，B站能够返回响应头Access-Control-Allow-Origin: http://a.com，那么，浏览器就允许A站的JavaScript访问B站的API。

注意到跨域访问能否成功，取决于B站是否愿意给A站返回一个正确的Access-Control-Allow-Origin响应头，所以决定权永远在提供API的服务方手中。廖雪峰官网：处理CORS

由于主动权在第三方，那么通过前端javascript访问是不允许的，可以通过后台代理的方式访问第三方接口，如下：

[note.js]

const express = require('express')
const axios = require('axios').default
var cors = require('cors')

const app = express()
app.use(cors()) // 允许跨域调用
app.use(express.urlencoded({
  extended: false
}))
app.use(express.json())



app.post('/proxy', async(req, res) => {
  const url = req.body.url
  const result = await axios.get(url)
  res.send(result.data)
})

app.listen(3000, () => {
  console.log(`服务器运行在3000端口`)
})
————————————————
版权声明：本文为优快云博主「李壮士   」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_44303631/article/details/89139150

jquery请求：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>测试一下调用第三方API</title>
</head>
<body>
  <script src="./lib/jquery.min.js"></script>
  <script>
    $(function() {
      $.ajax({
        type: "post",
        url: "http://localhost:3000/proxy",
        data: {
          url: 'https://api.douban.com/v2/movie/in_theaters'
        },
        success: function (response) {
          console.log(response)
        },
        error: function(err) {
          console.log(err)
        }
      });
    })
  </script>
</body>
</html>
————————————————
版权声明：本文为优快云博主「李壮士   」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_44303631/article/details/89139150