脚手架中配置代理,解决请求接口跨域问题
方法一:配置 package.json 文件
不能配置多个代理,只能配置单个代理
当请求了当前项目不存在的资源时,那么该请求会转发给5000(优先匹配当前项目资源)
- 打开
package.json
文件,进行配置
"proxy":"http://localhost:5000"
- 使用方法
import React, { Component } from 'react' import axios from 'axios' export default class App extends Component { getData1 = () => { // 会指向配置中的 http://localhost:5000 调用 /search/data1 接口地址 axios.get("http://localhost:3000/search/data1").then(res => { console.log(res) }) } render() { return ( <div> <button onClick={this.getData1}>获取数据1</button> </div > ) } }
方法二:创建 setupProxy.js 文件进行配置(推荐)
可以配置多个代理,可以灵活的控制请求是否走代理。
请求接口的时候必须加上所配置的前缀。
-
在src文件夹下创建配置文件:
setupProxy.js
,创建的配置文件名不可自定义 -
配置
setupProxy.js
文件const { createProxyMiddleware } = require('http-proxy-middleware') module.exports = function (app) { app.use( /**第一个请求配置 */ createProxyMiddleware('/api1', { //需要转发的请求(当请求中有api1前缀的请求,会触发该代理配置) target: "http://localhost:5000",//配置转发目标地址(能返回数据的服务器地址) changeOrigin: true,//控制服务器收到的请求头中host的值 /* changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000 changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:3000 changeOrigin默认值为false,但我们一般将changeOrigin值设为true */ pathRewrite: { '^/api1': '' }//重写请求路径,去除请求前缀,保证交给后台服务器的是正常请求地址(必须配置) }), /**第二个请求配置 */ createProxyMiddleware('/api2', {//需要转发的请求(当请求中有api2前缀的请求,会触发该代理配置) target: "http://localhost:5002",//配置转发目标地址(能返回数据的服务器地址) changeOrigin: true,//控制服务器收到的请求头中host的值 /* changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000 changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:3000 changeOrigin默认值为false,但我们一般将changeOrigin值设为true */ pathRewrite: { '^/api2': '' }//重写请求路径,去除请求前缀,保证交给后台服务器的是正常请求地址(必须配置) }) /** 更多请求配置... */ ) }
-
使用方法
import React, { Component } from 'react' import axios from 'axios' export default class App extends Component { getData1 = () => { // 使用 代理1 调用 /search/data1 接口获取数据 axios.get("/api1/search/data1").then(res => { console.log(res) }) } getData2 = () => { // 使用 代理2 调用 /search/data2 接口获取数据 axios.get("/api2/search/data2").then(res => { console.log(res) }) } render() { return ( <div> <button onClick={this.getData1}>获取数据1</button> <button onClick={this.getData2}>获取数据2</button> </div > ) } }