• 在package.json中加入如下: 1 { 2 "name": "demo", 3 "version": "0.1.0", 4 "private": true, ... 5 "proxy": { 6 "/demo": { 7 "secure": false, 8 "target": "http://192.168.10...

    在package.json中加入如下:

     1 {
     2   "name": "demo",
     3   "version": "0.1.0",
     4   "private": true,
     5   "proxy": {
     6     "/demo": {
     7       "secure": false,
     8       "target": "http://192.168.10.210:8080",
     9       "changeOrigin": true
    10     },
    11 
    12     "/TouTiao": {
    13       "secure": false,
    14       "target": "http://api.avatardata.cn",
    15       "changeOrigin": true
    16     },
    17     "/api": {
    18     "secure": false,
    19     "target": "http://dev.zxxk.com",
    20     "changeOrigin": true
    21     },
    22     "/ent": {
    23       "secure": false,
    24       "target": "https://interface.sina.cn",
    25       "changeOrigin": true
    26     },"/mobile": {
    27       "secure": false,
    28       "target": "http://mini.eastday.com",
    29       "changeOrigin": true
    30     }
    31   },
    32   "dependencies": {
    33     "antd": "^3.15.2",
    34     "axios": "^0.18.0",
    35     "http-proxy-middleware": "^0.19.1",
    36     "jsonp": "^0.2.1",
    37     "react": "^16.8.5",
    38     "react-dom": "^16.8.5",
    39     "react-router-dom": "^5.0.0",
    40     "react-scripts": "1.1.1",
    41     "react-swipe": "^6.0.4",
    42     "swipe-js-iso": "^2.1.5"
    43   },
    44   "scripts": {
    45     "start": "react-scripts start",
    46     "build": "react-scripts build",
    47     "test": "react-scripts test",
    48     "eject": "react-scripts eject"
    49   },
    50   "eslintConfig": {
    51     "extends": "react-app"
    52   },
    53   "browserslist": [
    54     ">0.2%",
    55     "not dead",
    56     "not ie <= 11",
    57     "not op_mini all"
    58   ]
    59 }

    然后接口部分:
     1     getRuleAction(){
     2         var self = this;
     3         return axios.post('/ent/feed.d.json?ch=health&col=ent&act=more&t=1484477669001&show_num=10&page=4').then((res) => {
     4             console.log("res",res.data.data)
     5             if (res.data.status == '1') {
     6                 let datalist=[]
     7                     this.setState({dataList:res.data.data});
     8             }
     9         }).catch(function (error) {
    10             console.log(error);
    11         })
    12 
    13 
    14     }


    接口处的、ent要和package.json中的 "/ent": {}一直,便可成功访问

     

     

    转载于:https://www.cnblogs.com/yinhao-jack/p/11171918.html

    展开全文
  • 第一步 安装 http-proxy-middleware npm install http-proxy-middleware ...第二步 src下创建一 setupProxy.js文件 里面书写一下代码 第三步 需要发送请求的地方 使用 这样 就能拿到请求的数...

    第一步 安装 http-proxy-middleware

    npm install http-proxy-middleware

    我们这里面请求用的axios,在将axios安装一下

    npm install axios

    第二步 src下创建一个 setupProxy.js文件

    里面书写一下代码

    第三步 需要发送请求的地方 使用

    这样 就能拿到请求的数据

     

    转载于:https://www.cnblogs.com/houjl/p/11376751.html

    展开全文
  • create-react-app脚手架由Facebook官方团队开发,主要是整合了如webpack等依赖包,因而无需每次都从零开始搭建react项目。该脚手架安装起来也非常方便,安装命令如下: # 全局安装"create-react-app"...

    安装

    create-react-app脚手架由Facebook官方团队开发,主要是整合了如webpack等依赖包,因而无需每次都从零开始搭建react项目。该脚手架安装起来也非常方便,安装命令如下:

    # 全局安装"create-react-app"架构
    $ npm install -g create-react-app
    
    # 创建脚手架项目
    $ create-react-app my-app
    
    # 进入项目目录
    $ cd my-app
    
    # 启动项目
    $ npm start
    

    启动后,会在开发环境下启动一个服务器,监听在3000端口,它会主动给你打开浏览器的,可以立刻就看到这个app的效果,如下图所示:

    如果恰好3000端口已被占用,可以修改package.json中的 start 来更改访问端口:

    "start": "set PORT=8081 && react-scripts start"

    为了与vue脚骨架的启动命令一样,个人习惯把 start 修改为:

    "dev": "set PORT=8081 && react-scripts start"

    启动命令则需更改为:

    $ npm run dev

     

    服务代理

    如果前后端分离各自独立开发,往往需要访问后台API来获取数据,当两者不在同一域名下时,前端访问便会跨域造成请求失败。create-react-app支持服务代理实现跨域请求API。只需在pageage.json中加入"proxy" 即可,如当跨域访问API地址为www.helloui.net时,配置如下:

    {
    	"name": "my-app",
    	"version": "0.1.0",
    	"private": true,
    	"dependencies": {
    		"axios": "^0.18.0",
    		"react": "^16.6.3",
    		"react-dom": "^16.6.3",
    		"react-scripts": "2.1.1"
    	},
    	"scripts": {
    		"dev": "set PORT=8081 && react-scripts start",
    		"build": "react-scripts build",
    		"test": "react-scripts test",
    		"eject": "react-scripts eject"
    	},
    	"eslintConfig": {
    		"extends": "react-app"
    	},
    	"proxy": "http://helloui.net",
    	"browserslist": [
    		">0.2%",
    		"not dead",
    		"not ie <= 11",
    		"not op_mini all"
    	]
    }
    

    使用axios模拟请求:

    import React, {Component} from 'react';
    import './App.css';
    import axios from "axios";
    
    class App extends Component {
    	constructor(props) {
    		super(props);
    		this.state = {};
    		this.proxyRequest = this.proxyRequest.bind(this);
    	}
    
    	proxyRequest() {
    		axios({
    			method: 'get',
    			url: "/process_get?name=123"
    		}).then((resp) => {
    			console.log(resp);
    		}, (err) => {
    			console.log(err);
    		});
    	}
    
    	render() {
    		return(
    			<div>
          			    <button onClick={this.proxyRequest}>服务代理请求</button>
          		        </div>
    		);
    	}
    }
    
    export default App;

    使用代理后发现请求的地址依旧是http://localhost:8081,但实际的数据来源于代理配置域名http://helloui.net 的服务。

    展开全文
  • 方式一 package.json 添加配置项 { { ... }, "proxy":"目标域名地址:...(但是当请求的地址和路由规则一致时就会出问题,并且不能设置多个转发规则) 方式二 使用插件 npm i http-proxy-middleware --save

    方式一

    package.json 添加配置项

    {
        {
        ...
        },
        "proxy":"目标域名地址:端口号"
    }

    重启react项目,此时,就可以进行代理转发。

    在package.json中添加proxy后,当访问一个react项目不存在的路由地址时,会自动的转发到proxy对应的目标域名地址上。(但是当请求的地址和路由规则一致时就会出问题,并且不能设置多个转发规则)

    方式二

    使用插件

    npm i http-proxy-middleware --save

    在src目录下创建一个名为 setupProxy.js 文件

    const proxy = require("http-proxy-middleware")
    module.exports = function(app){
        app.use(proxy.createProxyMiddleware(
            "/关键词",{
                target:"目标域名地址",
                changeOrigin:true,
                pathRewrite:{
                    "^/关键词":""
                }
            }
        ))
    	app.use(proxy.createProxyMiddleware(
    		"/关键词",{
    			target:"目标域名地址",
    			changeOrigin:true,
    			pathRewrite:{
    				"^/关键词":""
    			}
    		}
    	))
    	...
    }

    重启项目,然后就可以进行代理转发

    展开全文
  • 2019独角兽企业重金招聘Python工程师标准>>> ...

    1 react porxy 只代理一个

    修改package.json文件 新增

    "proxy":"http://172.19.5.35:9536",
    
      "name": "wangguan",
      "version": "0.1.0",
      "private": true,
      "proxy":"http://172.19.5.35:9536",
    

    2 react porxy 代理多个

    "name": "wangguan",
    "version": "0.1.0",
    "private": true,
    "proxy":{
      "/api": {
          "target": "http://172.19.5.35:9536",
          "ws": true
        },
    "/apc": {
          "target": "http://179.19.5.35:9536",
          "ws": true
        }
    },
    

    报错:提示只支持string类型,不支持object "proxy" in package.json must be a string.

    解决方案 新版react16.6中 create-react-app升级版(webpack4.0) 配置http请求跨域问题 但在最新的create-react-app v2升级版(webpack4.0)中,如果proxy不是字符串,并不能这么在 package.json直接配置,会报错! 通过查阅create-react-app的官方文档https://facebook.github.io/create-react-app/docs/getting-started,找到了如下的解决方案。

    1):安装http-proxy-middleware管理包,cnpm http-proxy-middleware --save
    

    2):在项目目录src/下新建setupProxy.js文件,然后写入如下代码:

    const proxy = require(‘http-proxy-middleware‘);
    
    module.exports = function(app) {
      app.use(proxy(‘/api‘, { 
           target: ‘http://192.168.1.144:8181‘ ,
           secure: false,
           changeOrigin: true,
           pathRewrite: {
            "^/api": "/"
           },
           // cookieDomainRewrite: "http://localhost:3000"
        }));
    };
    

    官网文档 Proxying API Requests in Development 安装http-proxy-middleware 复制文档

    Note: this feature is available with react-scripts@2.0.0 and higher.
    If the proxy option is not flexible enough for you, you can get direct access to the Express app instance and hook up your own proxy middleware.
    You can use this feature in conjunction with the proxy property in package.json, but it is recommended you consolidate all of your logic into src/setupProxy.js.
    First, install http-proxy-middleware using npm or Yarn:
    $ npm install http-proxy-middleware --save
    $ # or
    $ yarn add http-proxy-middleware
    
    Next, create src/setupProxy.js and place the following contents in it:
    const proxy = require('http-proxy-middleware');
    
    module.exports = function(app) {
      // ...
    };
    
    You can now register proxies as you wish! Here's an example using the above http-proxy-middleware:
    const proxy = require('http-proxy-middleware');
    
    module.exports = function(app) {
      app.use(proxy('/api', { target: 'http://localhost:5000/' }));
    };
    
    我的src/setupProxy.js
    const proxy = require('http-proxy-middleware');
    
    module.exports = function(app) {
      // ...You can now register proxies as you wish!
      app.use(proxy('/api', { 
        target: 'http://172.19.5.35:9536',
        secure: false,
        changeOrigin: true,
        pathRewrite: {
         "^/api": "/"
        },
       }));
       app.use(proxy('/apc', { 
        target: 'http://172.19.5.34:9531',
        secure: false,
        changeOrigin: true,
        pathRewrite: {
         "^/apc": "/"
        },
       }));
      //app.use(proxy('/apc', { target: 'http://172.19.5.34:9531' }));
    };
    

    相关代码 axios拦截设置 request.js文件

    import axios from 'axios'
    import {Toast} from 'antd-mobile';  
    
    //创建axios实例
    const service = axios.create({
      baseURL: process.env.BASE_API, // api的base_url
      timeout: 200000, // 请求超时时间
      withCredentials: true // 选项表明了是否是跨域请求
    })
    service.interceptors.request.use(config => {
      Toast.loading('加载中',1)              // loading组件,显示文字加载中,自动关闭延时1s
      console.log('request go');
      return config;
    }, err => {
      console.log('请求失败')
      return Promise.reject(err)
    })
    //拦截响应
    service.interceptors.response.use(config => {
      Toast.hide()                             // 销毁Toast组件
      console.log('response get')
      return config;
    }, err => {
      console.log('响应失败')
      return Promise.reject(err)
    })
    
    // respone拦截器
    service.interceptors.response.use(
      response => {
        /**
        * code为非000000是抛错 可结合自己业务进行修改
        */
        const res = response.data
        if (res.code !== '000000') {
          console.log("response",res)
          res.code = res.data.code
           res.message = res.response.data.msg
          Toast.info(res.code+res.message, 2);
          return Promise.reject('error')
        } else {
          return response.data
        }
      },
      error => {
        return Promise.reject(error)
      }
    )
    export default service
    

    批量接口 src/axios/pay.js

    import fetch from '../utils/request'
    // 1根据订单id获取订单信息
    export function getOrderById( data) {
      return fetch({
       // baseURL:"http://172.19.5.34:9531",
       // url: '/getOrderById',
        url: '/apc/getOrderById',
        method: 'post',
        data,
      })
    }
    // 2.获取商户支持的支付方式
    export function queryByOwenerIdAndOwnerType( params) {
      return fetch({
        url: '/api/productSubscribe/queryByOwenerIdAndOwnerType',
        method: 'get',
        params,
      })
    }
    

    页面调用

    import React, { Component } from 'react';
    import {List ,Radio,Button} from 'antd-mobile';
    import './payChoose.less';
    // using ES6 modules
    import { BrowserRouter, Route, Link } from 'react-router-dom'
    import {getOrderById,queryByOwenerIdAndOwnerType} from '../../axios/pay'
    
    const Item = List.Item;
    const Brief = Item.Brief;
    const RadioItem = Radio.RadioItem;
    
    class pay  extends Component {
      state={
        amount:0,
        coursewareName:''
      }
      requestList = ()=>{
       console.log("requestList")
       let data ={
        "orderId":"527850648009699328"
      }
       getOrderById(data).then(res=>{
         console.log("res=",res)
         const data  =  res.data
         console.log("data=",data)
         if(res.data){
          this.setState({
              amount:data.amount,
              coursewareName:data.coursewareName
          },()=>{
    	  
          })
    // 第二个接口
          let ownerId =data.ownerId
          let ownerType =data.ownerType
          let params={
            ownerId:ownerId,
            ownerType:ownerType
          }
          queryByOwenerIdAndOwnerType(params).then(res=>{
            if(res.data){
              let data = res.data.data
            }
          })
         }
         console.log("data=",data)
       }).catch(error=>{
         console.log("error",error)
       })
      }
    
      componentDidMount(){
        this.requestList();
      }
      render() {
        return (
         
      );
      }
    }
    
    export default pay;
    

    本地mock数据

    • .json文件放在
    • ajax请求
    axios.get('/mock/list.json').then((res)=>{
       const data = res.data;
       console.log(data);
    })
    

    转载于:https://my.oschina.net/shuaihong/blog/3010444

    展开全文
  • 解决跨域问题可以后台设置cros(跨域资源共享),如果前端解决的话可以使用代理,接下来一起来看一下create-react-app脚手架下如果配置 一、只代理一 在package.json文件中增加如下配置: "proxy": ...
  • 跨域问题是前端必然要遇到的问题 XMLHttpRequest cannot load ... to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the reque
  • nginx配置之proxy_pass

    2018-06-13 10:33:55
    在前端页面所在的服务器 nginx 配置上开一个路由,然后使用 proxy 去请求另一个域名下的资源。如果跨域资源也部署在同一台机器上,我们甚至可以 proxy 到 127.0.0.1,比如:1 2 3 location /api ...
  • //方法一:create-react-app脚手架低于2.0版本时候,可以使用对象类型,否则会报错 //后面2项(pathRewrite,secure)可以不写 "proxy":{ "/api":{ "target":"http://m.kugo.com",//目标服务器 "changeOrigin": ...
  • 今天又一需求;今天我们部署上线的系统,又两系统,两系统都是前后端分离的; 然后公司最后只给我们分配的一个子域名;这就比较蛋疼了;本人对这nginx不熟,只能百度了;通过配置两子目录来配置两工程;...
  • 一、方案一 在使用 create-react-app 脚手架创建 react 项目的...这一种方法只针对于低版本的,create-react-app 的版本低于 2.0 的时候可以在 package.json 增加 proxy 配置,proxy 可以是 object 类型。 二、方案二
  • 文章目录引入proxy 引入 先看一例子: import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import axios from 'axios'; class App extends Component { componentDidMount(){ axios...
  • Webpack dev server使用http-proxy解决跨域问题 ...webpack关于webpack-dev-server开启proxy的官方介绍 Vue-cli proxyTable 解决开发环境的跨域问题——虽然这篇是写vue的,不过用在webpack-dev-serve
  • /src/setupProxy.js 配置文件内容 const proxy = require('http-proxy-middleware') module.exports = function(app) { app.use(proxy('/api', { target: 'http://api.kylin.eosbeijing.one:8880', se...
  • 在网上看到了多种解决react跨域的方法,但是在实际的项目中并不是所有的方法都是可行的。 一、最简单的操作 在package.json中加入 "proxy": "http://localhost:8000" 然后你页面中的请求fetch('/api/userdata/'...
  • 最近遇到公司的一些项目,是纯静态的不用编译的普通项目,由于前端会跨域,这些项目...所以我自己就是用express框架去做一服务器,然后进行请求的代理转发。 首先需要准备的是,express框架,然后就是http-pro...
  • 环境变量: 在根目录直接新建文件: .env.production ...必须是 REACT_APP_ 开头的 REACT_APP_ROOT='/api' 读取不变还是: let root = process.env.REACT_APP_ROOT 设置代理 在src 根目录新建:set...
  • 时候我们需要在本地调试项目,而通过express+nodejs+mongoDB我们可以很快搭建一本地服务器,一般在3000端口,由于React与服务器所在端口不同,所以需要进行跨域访问,在express中只需加入以下修改app.all('*',...
  • 写在前面的话自已以前对redux,react,rect-redux,react-router都是有一点的了解,并且在真实的项目中也多少有些涉及。但是不足的地方在于没有做一demo将他们串起来,所以总是感觉似懂非懂。特别是react服务端渲染这...
  • springboot+react前后端分离项目中,跨域问题必然存在,解决方案有三种类型: 1、前端解决: 在package.json中添加如下代码: { "name": "myproject1", "version": "0.1.0", "private": true, **"proxy": ...
1 2 3 4 5 ... 20
收藏数 1,115
精华内容 446