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）：
那就是 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').defaultvar 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端口`)})————————————————版权声明：本文为CSDN博主「李壮士 」的原创文章，遵循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>————————————————版权声明：本文为CSDN博主「李壮士 」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/weixin_44303631/article/details/89139150
复制代码
不同的后端，处理跨域问题方案。链接地址
总结
这个问题取决于第三方 api 接口是否支持前端 javascript 请求，也就是说是否支持跨域请求，需要后台支持。
如果不支持，那么只能通过后台访问的方式，去请求第三方接口，再返回至浏览器。
评论