create-react-app创建react项目,使用axios跨域

最近用react做项目练手,项目中调用接口有跨域问题,引用的插件是axios,react项目是用 create-react-app创建的,解决跨域问题可以后台设置cros(跨域资源共享),如果前端解决的话可以用代理,用webpack搭建的项目可以在webpack.config.js中配置,用create-react-app创建的项目webpack配置集成在react-script中集成了,不好配置,可以在package.json文件中配置proxy.

  

   上图表示接口中请求的前缀都是proxy的值,比如要请求的接口是https://www.aaa.com/app/userQry,在package.json中proxy设置为‘https://www.aaa.com/app’,

调用函数请求数据时url为userQry,就行了。下面是请求的函数。

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
React 项目使用 Axios 进行网络请求时,可能会遇到跨域问题。出现跨域问题的原因是浏览器的同源策略限制,即只允许同源网址(协议、域名、端口号均相同)之间进行通信。如果你需要访问不同源的资源,就需要进行跨域处理。 以下是一些处理跨域问题的方法: 1. 使用代理 在 React 项目中,可以通过配置代理来解决跨域问题。在 package.json 文件中添加如下代码: ``` "proxy": "http://api.example.com" ``` 这里将代理地址设置为 http://api.example.com ,当发送请求时,axios 会自动将请求发送到代理地址,然后再由代理地址转发到目标地址。这样就可以避免跨域的问题。 2. 后端设置 CORS 如果你无法使用代理,或者代理无法满足你的需求,可以让后端设置 CORS(跨域资源共享)来解决跨域问题。CORS 是一种机制,它允许 Web 应用程序从不同的源访问其资源。 在后端代码中,可以添加如下代码来设置 CORS: ``` res.setHeader('Access-Control-Allow-Origin', '*'); ``` 这里将 Access-Control-Allow-Origin 设置为 * ,表示允许所有来源访问资源。当然,你也可以设置为特定的来源。 3. 使用 JSONP JSONP 是一种解决跨域问题的方法,它利用了 HTML 中 script 标签可以跨域加载资源的特性。在 React 项目中,可以通过使用 jsonp 库来实现 JSONP 请求。 以下是一个使用 jsonp 库的例子: ``` import jsonp from 'jsonp'; jsonp('http://api.example.com', {}, (err, data) => { if (err) { console.error(err); } else { console.log(data); } }); ``` 这里调用了 jsonp 函数,将目标地址设置为 http://api.example.com 。jsonp 函数会自动创建一个 script 标签,加载目标地址,并在加载完成后执行回调函数。 在 React 项目使用 Axios 进行网络请求时,可以通过对 Axios 进行封装来简化代码,并提高代码的复用性。以下是一个简单的 Axios 封装示例: ``` import axios from 'axios'; const instance = axios.create({ baseURL: 'http://api.example.com', timeout: 5000, }); instance.interceptors.request.use( (config) => { // 在请求发送之前做一些处理 return config; }, (error) => { // 对请求错误做一些处理 return Promise.reject(error); } ); instance.interceptors.response.use( (response) => { // 对响应数据做一些处理 return response.data; }, (error) => { // 对响应错误做一些处理 return Promise.reject(error); } ); export default instance; ``` 这里创建了一个 Axios 实例,并设置了 baseURL 和 timeout 。然后,通过拦截器对请求和响应进行处理,并最终返回处理后的数据。在其他代码中,只需要引入封装后的 Axios 实例即可进行网络请求。 ``` import axios from './axios'; axios.get('/users').then((data) => { console.log(data); }); ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值