axios请求三方API跨域,用原生的ajax正常

用axios 请求第三方接口会报跨域,但是用原生的ajax却是可以正常访问的
报错图片
当时考虑是跨域问题,用到了proxyTable,是可以的,但是在生产环境却又出现了问题,找nginx配置相关 proxy_pass
这里是个大坑,我的配置是
// ‘/api’:{
// target: ‘http://127.0.0.1:8997’,
// changeOrigin:true,
// },
奈何这样配置的意思是转发到该服务器的8997端口,而不是我安装的第三方应用内的接口,思来想去,还是得直接调用http://127.0.0.1:8997,这个接口,报错跨域,忽然如有神助,想着是用axios不行,用原生的ajax行不行,试完惊呆了,竟然可以调通,原来是自己考虑多了,这时从网上搜素为什么axios请求三方API跨域,用原生的ajax正常
网上朋友有人说可能是axios设置了全局的axios.defaults.withCredentials = true,//表示跨域请求时是否需要使用凭证
污染了整个axios环境,需要将axios私有化
const service = axios.create({
baseURL: base url + request url
withCredentials: true,
timeout: 5000 // request timeout
})
这样一来,不会污染整个axios,瞬间豁然开朗了起来

在使用axios进行请求处理解决跨域问题时,可以通过配置axios请求头或使用代理服务器来实现。 一种解决跨域问题的方法是在axios请求中设置`Access-Control-Allow-Origin`头部,允许指定的域名或IP地址访问。例如,如果目标服务器允许`http://example.com`进行访问,可以在请求中添加以下代码: ```javascript axios.get('http://api.example.com/data', { headers: { 'Access-Control-Allow-Origin': 'http://example.com' } }) ``` 另一种常见的解决跨域问题的方法是通过代理服务器进行请求转发。可以在本地启动一个代理服务器,然后将axios请求发送到代理服务器上,再由代理服务器请求转发到目标服务器上。这可以通过配置webpack-dev-server或使用http-proxy-middleware等工具来实现。 以下是使用http-proxy-middleware进行跨域请求转发的示例代码: 1. 安装http-proxy-middleware: ```bash npm install http-proxy-middleware --save-dev ``` 2. 在项目的根目录下创建一个`setupProxy.js`文件,并添加以下代码: ```javascript const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use( '/api', createProxyMiddleware({ target: 'http://api.example.com', changeOrigin: true, pathRewrite: { '^/api': '' } }) ); }; ``` 3. 在你的代码中使用`/api`作为接口路径,例如: ```javascript axios.get('/api/data') ``` 这样,axios请求会被代理服务器转发到`http://api.example.com/data`上,并且不再产生跨域问题。 希望以上的解决方案能够帮到你!如果还有其他问题,请随时提问。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值