跨域获取后台数据undefined_React 跨域与路由

1.跨域在React环境中的跨域问题参考地址：https://github.com/facebook/create-react-app/blob/master/docusaurus/docs/proxying-api-requests-in-development.md#configuring-the-proxy-manually1.开发环境跨域处理...

weixin_39851914

181人浏览 · 2020-12-16 06:42:28

weixin_39851914 · 2020-12-16 06:42:28 发布

1.跨域

在React环境中的跨域问题

参考地址：https://github.com/facebook/create-react-app/blob/master/docusaurus/docs/proxying-api-requests-in-development.md#configuring-the-proxy-manually

1.开发环境跨域处理

proxy:代理

1.配置package.json文件：后台已经存在接口地址

"proxy":"http://tingapi.ting.baidu.com"

2.Configure the proxy yourself：自己搭建服务器的情况下

1.安装中间件：npm install http-proxy-middleware --save

2.在src根目录下创建setupProxy.js

3.在文件中添加如一下代码修改地址

 const proxy = require('http-proxy-middleware');
       module.exports = function(app) {
             app.use(proxy('/api', { target: 'http://localhost:3001/' }));
        };

2.生产环境跨域处理

cros

cors解决方案：

这是一个W3C标准（显然比jsonp背景深厚许多），同样需要浏览器和服务器同时支持，但是整个通信过程，都是浏览器自动完成，不需要用户参与，就像平时写Ajax一样（如果使用的是jquery的话）。
下面是原生js实现CORS的代码

function createCORSRequest(method,url){
        var xhr=new XMLHttpRequest();
        if("withCredentials" in xhr){
            xhr.open(method,url,true);
        }else if(typeof XDomainRequest != "undefined"){//IE10之前的版本使用XDmainRequest支持CORS
            xhr=new XDomainRequest();
            xhr.open(method,url);
        }else{
            xhr=null;
        }
        return xhr;
    }
    var request=createCORSRequest("get","待访问的地址");
    if(request){
        request.onload=function(data){
            //do sth
        };
        request.send();
    }

jsonp

- flyio拦截器中执行异步任务

- 发送jsonp请求

现在有两个不同域网站 a网站 & b网站

1. 当访问a网站时检测有无token，无token则向b网站发送jsonp请求换取token，在token请求回来之前暂不受理其他任何请求（防止重复发送jsonp请求），获取后将token写入cookie,写入完毕后，跳转到b网站进行登录，有token则进行下一步。

2. 已有token，a网站的响应拦截器则检测token是否过期，未过期则放行，过期则向b网站发送jsonp请求更新token,更新成功刷新页面。

JOSNP解决方案：

就是利用<script>标签没有跨域限制来达到与第三方通讯的目的。当需要通讯时，本站脚本创建一个<script>元素，地址指向第三方的API网址，形如：
<script src=”http://www.example.net/api?param1=1&param2=2″></script>
并提供一个回调函数来接收数据（函数名可约定，或通过地址参数传递）。
第三方产生的响应为json数据的包装（故称之为jsonp，即json padding），形如：
callback({“name”:”hax”,”gender”:”Male”})
这样浏览器会调用callback函数，并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。

跨域访问：
地址：http://p.3.cn/prices/mgets?skuIds=J_2146845&type=1&callback=setPrice
回调：setPrice
数据格式：[{"id":"J_2146845","p":"139.00","m":"159.00"}]
html代码：
<button id="btn">按钮</button>
<div id="div"></div>
js代码：
var div = document.
        getElementById("div");
var oScript = null;
var btn = document.getElementById("btn").onclick = function () {
    //伪造一个script加载过程
    oScript = document.createElement("script");
    oScript.src = "http://p.3.cn/prices/mgets?skuIds=J_2325379&type=1&callback=setPrice";
    document.body.appendChild(oScript);
};

function setPrice(str){
    div.innerHTML = str[0].p;
    console.log(str[0].m);
    document.body.removeChild(oScript);
}

2.路由

1.安装：

npm install --save react-router react-router-dom

2.使用

<BrowserRouter>
<BrowserRouter> 使用 HTML5 提供的 history API (pushState, replaceState 和 popstate 事件) 来保持 UI 和 URL 的同步。

 import { BrowserRouter } from 'react-router-dom'; 
 <BrowserRouter 
    basename={string} 
    forceRefresh={bool}
    getUserConfirmation={func} 
    keyLength={number} > <App /> 
</BrowserRouter>

<HashRouter><HashRouter> 使用 URL 的 hash 部分（即 window.location.hash）来保持 UI 和 URL 的同步。

 import { HashRouter } from 'react-router-dom';  
<HashRouter> 
     <App /> 
</HashRouter>

<Link>

为你的应用提供声明式的、可访问的导航链接。

import { Link } from 'react-router-dom';

<Link to="/about">About</Link>

<NavLink>

一个特殊版本的 <Link>，它会在与当前 URL 匹配时为其呈现元素添加样式属性,路由高亮.

import { NavLink } from 'react-router-dom';

<NavLink to="/about">About</NavLink>

<Redirect>
使用 <Redirect> 会导航到一个新的位置,重定向。

import { Route, Redirect } from 'react-router-dom';

<Route exact path="/" render={() => (
  loggedIn ? (
    <Redirect to="/dashboard" />
  ) : (
    <PublicHomePage />
  )
)} />

开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

操作系统大会&openEuler Summit 2024参会指南，请查收！