美文网首页
react开发环境跨域方案

react开发环境跨域方案

作者: 开着五菱宏光的小白 | 来源:发表于2020-07-31 20:10 被阅读0次

方案一

使用proxy代理跨域 假设需要跨域访问的域名为www.baidu.com

/*
  * 在package.json中配置如下代码
*/
"proxy": "www.baidu.com"  

访问的地址需要更改

/*
  * 假设原请求地址为www.baidu.com/v1?id=10
*/
fetch('www.baidu.com/v1?id=10')
/*
  * 处理过跨域后的请求应为
*/
fetch('/v1?id=10')

需要注意改变package.json中的内容需要重启服务

方案二

手动配置跨域

  • 第一步安装 http-proxy-middleware
/*
* 使用yarn安装
*/
yarn add  http-proxy-middleware 
/*
* 使用npm/cnpm安装
*/
npm/cnpm install http-proxy-middleware  --save
  • 第二步src新建setupProxy.js文件
/*
*若发现下面文件start项目报错,到  https://github.com/facebook/create-react-app/blob/master/docusaurus/docs/proxying-api-requests-in-development.md 查看文档 可能api更新了
*
*需要注意的是下面代理的是/api  意味着代理的访问路径要包含api  例如www.baidu.com/api/xx  此配置根据需求更改
*/
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
    app.use(
        '/api',
        createProxyMiddleware({
            target: 'http://localhost:5000',
            changeOrigin: true
        })
    )
}

访问的地址需要更改

/* 
* 假设原访问地址为 http://localhost:5000/api/list
*/
fetch('http://localhost:5000/api/list')
/* 
* 配置后的访问地址应为
*/
fetch('/api/list')

相关文章

  • 开发环境跨域和生产环境跨域

    开发环境跨域 前后端分离,IP地址不同,请求数据必然导致跨域问题;解决方案:proxy设置 生产环境跨域 解决方案...

  • react开发环境跨域方案

    方案一 使用proxy代理跨域 假设需要跨域访问的域名为www.baidu.com 访问的地址需要更改 需要注...

  • react 数据交互

    axios fetch语法: react跨域: vue跨域方案:https://www.jianshu.com/p...

  • react 开发、生产环境跨域,线上环境部署

    1. 开发环境跨域 正向代理 打开 node_modules/react-scripts/config/webpa...

  • ZUUL跨域问题

    云环境中每个服务自己有跨域解决方案,而网关需要做最外层的跨域解决方案.如果服务已有跨域配置网关也有,会出现*多次配...

  • 前端配置proxy跨域

    相信做前端开发的都没少见这种跨域的错误,怎么解决呢?? ?react项目 跨域配置 都是基于 create-rea...

  • JW-JSONP

    去年学习React时碰到过JS跨域访问的问题,当时尝试的解决方案有Jsonp、服务器允许跨域、设置Content-...

  • vue请求跨域问题解决

    production:产品 生产环境 development:开发 开发环境 1、开发环境设置跨域 使用工具:vu...

  • Spring Boot使用CORS解决跨域问题

    一、跨域问题描述 Web开发经常会遇到跨域问题,解决方案有:jsonp,iframe,CORS等等。CORS 与 ...

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

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

网友评论

      本文标题:react开发环境跨域方案

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