react 脚手架 关于跨域的坑,及axios中post请求参数带:的解决方案

关于create react app官方文档上,有关于跨域的详细介绍,基本分两种,第一种就是直接在package.json中直接加proxy:‘https:需要跨域的域名’,缺点是高版本的react-script只支持字符串,也就是你不能匹配到多域名来进行代理了。第二种是通过http-proxy-middleware来实现多域名跨域,比较常见,具体做法是:

1.npm 安装http-proxy-middleware

2.在项目src目录下新建setupTests.js文件,注意名字不能错哦。

3.导入http-proxy-middleware,进行如下匹配规则配置:

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/asg',
    createProxyMiddleware({
      target: 'https://api.klynf.com/',
      changeOrigin: true,
    })
  );
};

官方文档在这里就结束了,但是如果这个时候你如果已经定义了环境变量来作为baseUrl,你会发现你的代理配置并没有生效,还是有跨域的错误,这时你只需要把在axios中配置的baseurl设置为‘/’,就可以解决这个问题了,代理会生效。

还有遇到一个之前没遇到的问题,如果axios发送post请求时,会出现 传的参数带: 的情况,这是由于axios的 headers中Content-Type的值引起的,application/x-www-form-urlencoded会引起这种情况,如果有接收数据格式formData的采用这种格式,如果没有这个需求,只要设置为multipart/form-data就能解决这个问题,如果发生了复杂请求,会导致多了个option请求,解决方法是转换为简单请求,即: 请求方法是GET、HEAD或者POST,并且当请求方法是POST时,Content-Type必须是application/x-www-form-urlencoded, multipart/form-data或着text/plain中的一个值。好啦,自己碰到的一个小坑,记录一下,希望可以帮到大家

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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); }); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值