• 在papackage.json里配置(目前不推荐了)

//方法一：create-react-app脚手架低于2.0版本时候，可以使用对象类型，否则会报错
//后面2项（pathRewrite，secure）可以不写
"proxy":{
   "/api":{
      "target":"http://m.kugo.com",//目标服务器
      "changeOrigin": true//默认false，是否需要改变原始主机头为目标URL
      "pathRewrite": {"^/api" : "/"},// 重写请求，比如我们源访问的是api，那么请求会被解析为/
      "secure": false, //如果是https接口 需要配置这个参数为true
//方法二：最新的create-react-app脚手架2.0版本以上只能配置string类型
"proxy": "http://m.kugo.com",
最好的方式可以通过middleware中间件进行配置（Creact React App脚手架官网推荐方法，可以配置多个代理）
 
//方法三：
//1.先安装http-proxy-middleware
npm install http-proxy-middleware --save
//2.然后在src目录下创建 setupProxy.js 文件
//3.最后设置代理（setupProxy.js文件内容）
const proxy = require('http-proxy-middleware')
module.exports = function(app) {
  app.use(
    proxy('/api', {  //`api`是需要转发的请求 
      target: 'http://localhost:5000',  // 这里是接口服务器地址
      changeOrigin: true,
这里需要注意的是我们的axios的baseURL，设置的时候不能还设置加上原来服务器域名的地址，应该只设置 /api 就好了
 
axios.defaults.baseURL = '/api';
一般下载的新脚手架的项目根目录中没有config文件夹,暴露出项目配置文件，项目下执行:
 
npm run eject
用方法三配置完后要重启代码,结果遇见了问题
 proxy is not a function,打印proxy，发现真的不是函数。而是一个对象,可能是官网demo写的早，proxy这个插件经过了修改？那咱也改！
 既然导出的对象里createProxyMiddleware是个函数，那就用这个函数调用不就得了。
 
WeChat38d0bd96d84e21f5cfd02d19fff620b0.png
 
const proxy = require('http-proxy-middleware')
module.exports = function(app) {
  app.use(
    proxy.createProxyMiddleware('/api', {  //`api`是需要转发的请求 
      target: 'https://www.baidu.com/',  // 这里是接口服务器地址
      changeOrigin: true,
      pathRewrite: {'^/api': ''}


 作者：青争小台
 链接：https://www.jianshu.com/p/fd65a2051bfe
 来源：简书
 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
                    在papackage.json里配置(目前不推荐了)//方法一：create-react-app脚手架低于2.0版本时候，可以使用对象类型，否则会报错//后面2项（pathRewrite，secure）可以不写"proxy":{   "/api":{      "target":"http://m.kugo.com",//目标服务器      "changeOrigin": true//默认false，是否需要改变原始主机头为目标URL      "pathRewrite": {"^/api
				
问题描述：
在使用http-proxy-middleware的过程中，使用app.use()配置完代理后，发送请求报404。原因是虽然开启了代理，但是请求的url里多了一个/api/，这时我们需要把多余的/api/去掉，需要使用pathRewrite参数，把/api/设置成空，这时就可以正常跨域访问了
配置文件：
const { createProxyMiddleware }  = require('http-proxy-middleware');
module.exports = function(app){
  //console.log(app)
  app.use(
    creat
				
React代理配置跨域：
相关网站： https://create-react-app.dev/docs/proxying-api-requests-in-development/
官网需要下载： npm install http-proxy-middleware --save
在下载官方React脚手架的时候，已经有了这个，只不过不是最新版本的代理配置，如果按照官网的来就下载。流程都一样
注：配置完后需要重新启动脚手架，才能生效
老版本的配置流程：
1、在src下新建setupProxy.js 名字必需是
				
1.react推荐用http-proxy-middleware中间件
安装http-proxy-middleware，命令如下：
``npm install http-proxy-middleware
2.安装成功之后，在src目录下新建文件setupProxy.js，配置如下：
const {createProxyMiddleware} = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(cre
				
react 跨域配置（proxy——单向跨域代理配置、http-proxy-middleware——接口转发器）
一、单向跨域代理（所有请求发向于同一个http地址）
在package.json文件中使用proxy配置可以解决单向跨域问题
	"proxy":{
		"/api":{
		"target":"http://m.kugo.com",
      				"cha...
注意：此功能适用于 react-scripts@0.4.0 及更高版本。
你可能需要开发服务器通过 HTTPS 提供页面。 当 API 服务器本身为 HTTPS 服务时，使用 “proxy”（代理）功能 将请求代理到 API 服务器，这可能是有用的。
为此，请将 HTTPS 环境变量设置为 true ，然后像往常一样使用 npm start 启动开发服务器：
Windows (cmd.exe)
set HTTPS=true&&npm start
（注意：缺少
				
React China 使用 Discourse 搭建在 Digital Ocean 上,
原先认为 HTTPS 步骤繁琐而且花钱没有考虑过加上 HTTPS.
不过 fracer 同学很想要, 而且提示了 Cloudflare 的方案, 于是打算看下.
现在访问 https://react-china.org/ 已经能看到 HTTPS 绿色小锁的提示了
关于 Cloudflare
2. 配置webpack
安装node-sass后，需要在Webpack配置文件中配置Sass loader。对于create-react-app（CRA），可以建立一个sass.config.js文件并在其中添加配置信息。
// sass.config.js
module.exports = {
  sassOptions: {
    includePaths: ["./src"]
我这里是在项目根目录下创建的，所以相对路径为"./src"，如果是其他路径，则相对路径也需要相应更改。
3. 启用Sass
在安装node-sass和完成Webpack配置后，可以在React组件中启用Sass，使用以下命令来安装sass-loader：
npm install sass-loader --save-dev
在React组件中，可以使用以下命令来启用Sass：
import './style.scss'
在style.scss文件中，您可以编写基于Sass的样式代码。
以上就是在create-react-app中配置和使用sass的步骤。