ReactJS中window.location.assign使用问题及跨域报错求助

一、页面跳转失效的原因与修复 #

你用window.location.assign("/teste")的时候，这个/开头的路径是根路径，它会从你的网站根目录（比如http://localhost:3000/）去寻找teste页面，但你的目标页面和当前页面在同一个文件夹里，应该用相对路径才对。

举个例子：如果当前页面是http://localhost:3000/my-folder/current.html，同文件夹的目标页面是teste.html，那么：

• /teste 会指向 http://localhost:3000/teste（根目录下，找不到）
• ./teste 或直接 teste 会指向 http://localhost:3000/my-folder/teste（正确的同文件夹路径）

所以把代码改成下面两种方式之一就行：

filterFunc (){ 
  window.location.assign("./teste"); 
}

或者更简洁的写法：

filterFunc (){ 
  window.location.assign("teste"); 
}

二、CORS报错的说明 #

你看到的No 'Access-Control-Allow-Origin' header报错，和页面跳转本身无关——是你的页面里有一个请求发送到了https://console.bluemix.net/analytics/bmaid，但这个服务器没有配置允许http://localhost:3000跨域访问。

解决思路分两种情况：

• 如果这个请求是你自己代码里发起的：需要在后端（Bluemix那边的服务）配置Access-Control-Allow-Origin头，允许你的开发域名http://localhost:3000访问；
• 如果这个请求是第三方脚本（比如Bluemix的分析统计脚本）自动发起的：可以考虑在开发环境临时禁用这个脚本，或者用代理工具（比如webpack dev server的代理）转发请求，绕过跨域限制。

内容的提问来源于stack exchange，提问作者Jota