react 脚手架环境设置代理服务器解决跨域

落日映苍穹つ 2021-07-24 14:43 493阅读 0赞

除了在nodejs里面的路由请求中设置外
    	res.set('Access-Control-Allow-Origin', '*');
    	
    对于使用creat-react-app构建的项目
    	1、npm run eject
    		将当前位置抛出,让我们可以修改配置文件
    		
    	2、在package.json中添加
    		"proxy":"http://localhost:后台服务器名称"
    	
    	3、将网络请求的路径修改
    		去掉http://120.0.0.1; 直接写nodejs中的路由名

代码示例:  
**package.json文件:**

"proxy":"http://localhost:3000"

**网络请求文件:**

import React ,{ Component}from 'react';
    import User from './user'
    
    class App extends React.Component { 
    
      constructor()
      { 
        super();
    
      }
      componentDidMount()
      { 
        var flag=true;
        if(flag)
        { 
          fetch('/news')
          .then(data=>{ return data.json()})
          .then(res=>{ console.log(res)})
        }else{ 
    
          fetch('/movie',{ 
            method:'POST',
            headers:{ 
            'Accept': 'application/json, text/plain, */*',
            'Content-Type': 'application/x-www-form-urlencoded'
            },
            body:"id=jeff"
    
          }).then(data=>{ return data.json()})
          .then(res=>{ console.log(res)})
        }
      }
    
    
      render(){ 
         
          return (
                <div className="App">
                <User />
              </div>
          );
      }
    }
    
    export default App;

**nodejs文件:**