美文网首页
create-react-app:2种跨域方式

create-react-app:2种跨域方式

作者: Melody_28a2 | 来源:发表于2021-01-10 11:33 被阅读0次

方式一:eject弹出配置文件

使用npm run eject将react-scripts中一些重要的配置文件弹出,然后对文件config/webpackDevServer.jspoxy选项进行配置
注意:如果eject失败 ,可以将文件夹下面的.git文件夹删除 再进行eject,或者git commit后再弹出

proxy:{
        "/api":{
            target:"http://XXXX:3000",
            changeOrigin:true,
            pathRewrite:{
            "^/api":""
            }
        }
    }

方式二:http-proxy-middleware

安装 http-poxy-middleware,在src目录下新建 setupProxy.js文件 进行如下配置:

npm i http-proxy-middleware -S
const {createProxyMiddleware} = require("http-proxy-middleware");
    module.exports = function(app){
        app.use(
            createProxyMiddleware("/api",{
                target:"http://47.96.0.211:9000",
                changeOrigin:true,
                pathRewrite:{
                "^/api":""
                }
            })
        ),
        app.use(
            createProxyMiddleware("/api",{
                target:"http://47.96.0.211:9000",
                changeOrigin:true,
                pathRewrite:{
                "^/api":""
                }
            })
        )
    }

如果跨域文件不生效,查看下文件引入路径和名称是否匹配

image.png

相关文章

  • 解决create-react-app下跨域、fetch的post

    最近用create-react-app脚手架搞前后台分离,遇到了一推bug,解决方案如下! 1、跨域跨域问题网上有...

  • #hello,JS:15 同源策略 & 跨域(JSONP)

    跨域有几种常见的方式?你有没有跨域使用的经验? 方式: 使用jsonp实现跨域?使用cors实现跨域?浏览器另类的...

  • Ajax 请求和跨域

    跨域的几种方式: cors方式 cross-orign-resource-shareing(跨域)参考:http:...

  • 关于设置env等环境变量的思考

    1、如何处理跨域后台处理跨域前端处理跨域浏览器处理跨域 前端本地处理跨域:代理线上跨域的处理方式:Nginx反向代...

  • JSONP跨域

    JSONP原理及应用 之前的文章中简单介绍过前端可以实现的跨域方式,这次介绍一种更为常用的跨域方式,但这种跨域方式...

  • React开发环境跨域问题解决

    前言 create-react-app搭建的项目中,请求需要处理跨域问题 解决方案 找到webpackDevSer...

  • create-react-app:2种跨域方式

    方式一:eject弹出配置文件 使用npm run eject将react-scripts中一些重要的配置文件弹出...

  • springboot 三种跨域处理方式

    springboot 三种跨域处理方式:1.通过Filter方式实现全局跨域2.通过Interceptor方式实现...

  • 常见前端开发面试题(http部分)

    跨域有哪几种方式 1.jsonp跨域2.CORS跨域资源共享3.iframe标签跨域4.在webpack中通过配置...

  • AJAX

    题目 手写一个ajax 跨域的常用实现方式 知识点 XMLHttpRequest 状态码 跨域:同源策略,跨域解决...

网友评论

      本文标题:create-react-app:2种跨域方式

      本文链接:https://www.haomeiwen.com/subject/ulehaktx.html