ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

react跨域访问,通过axios

2022-05-15 08:33:24  阅读:149  来源: 互联网

标签:axios 跨域 react let scripts data name


配置package.json

 "proxy": { //关键代理
    "/api": {
      "target": "http://127.0.0.1:8084",
      "changeOrigin": true
    }
  }

 

{
  "name": "react-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.1.1",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.27.2",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "homepage": ".",
  "main": "index.html",
  "proxy": { //关键代理
    "/api": {
      "target": "http://127.0.0.1:8084",
      "changeOrigin": true
    }
  } 
}

类组件调用

let  BaseURL="/api"
        let  Url="/HellowServlet2"


        // let Books = ['aaa','bbb'];

        let Params= {
            "id" : "3",
            "name": "ll",
            "age": "18"
        }

        //axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";

        //全局配置baseURL[URL三个字母必须大写,不然axios不认]

        let ts = this;//在axios中setState方法一

        axios.request({
            headers:{  //非必须
                "Content-Type":"application/x-www-form-urlencoded"//,
                // "Access-Control-Allow-Origin":"http://127.0.0.1", //不可用
                // "Access-Control-Allow-Credentials": "true"//不可用
            },
            // method: 'get', //非必须
            baseURL:BaseURL,
            url:Url,
            // data:Qs.stringify(Params), //参数类型一
            params:Params//,    //参数类型二
            //withCredentials: true//跨域设置 //不可用
        })
          .then(function (response) {
            let data =response.data
            console.log(data.name);

            ts.getData(data.name);
          })
        //   .then(aaa => this.setState({ //在axios中setState方法二
        //       argName:aaa.data.name
        //   }))
          .catch(function (error) {
            console.log(error);
          });
    }

    getData(newName){
        this.setState({
            argName: newName
        });
    }

 

标签:axios,跨域,react,let,scripts,data,name
来源: https://www.cnblogs.com/loge/p/16272249.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有