React中使用Axios及解决跨域问题

最新推荐文章于 2023-12-08 14:58:45 发布

wandoumm

最新推荐文章于 2023-12-08 14:58:45 发布

阅读量762

点赞数 1

分类专栏： react 文章标签： react.js

本文链接：https://blog.csdn.net/wandoumm/article/details/80169140

版权

react 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

setupProxy.js

引入axios

import axios from 'axios';

axios请求正常写，post 和 put 要在参数中额外加请求体对象属性

	 axios.get('https://i.maoyan.com/ajax/moreComingList?token=&movieIds=1367251,1224712,1383307,1415091,344038,1432540&optimus_uuid=625F5500F1CC11EC81403D80E539F62BC1CF9F57EF1447FD8DF0D0FCFDD8C1BA&optimus_risk_level=71&optimus_code=10').then(res=>{
      console.log(res)
    }).catch(
      err => console.error(err)
    )

react项目跨域问题的解决方案

npm install http-proxy-middleware --save

setupProxy.js

const { createProxyMiddleware } = require("http-proxy-middleware");
 
module.exports = function (app) {
  app.use(
    createProxyMiddleware(
      "/ajax", //遇见/api-elm前缀的请求,就会触发该代理配置
      {
        target: "https://i.maoyan.com", //请求转发给谁（能返回数据的服务器地址）
        changeOrigin: true, //控制服务器收到的响应头中Host字段的值
        secure: false,
        // pathRewrite: {
        //   "^/api": "",
        // }, //重写请求路径，保证交给后台服务器是正常地请求地址（必须配置）
      }
    )
  );
};