react前端配置路径问题_react前端的跨域问题

全栈开发时使用到的开源后端项目。

https://github.com/ruilisi/go-pangu​github.com

教程

xingo：用go搭建高效rest api服务（使用postgresql，redis，gin，gorm...）​zhuanlan.zhihu.com

更多的依托此项目的全栈开发的文档说明，请点击我的头像，查看文章。前端框架将会在之后开源。

问题情况

在前端开发的时候，我遇到过这样的问题。

其中最重要的一个词就是“cors”，我一查，原来是跨域问题。

网上有一种解决方法。

也就是修改头，加上这几个东西。

    // 'Access-Control-Allow-Origin': 'Origin, X-Requested-With, Content-Type, Accept, x-token',
    // 'Access-Control-Allow-Origin': '*',
    // 'Access-Control-Allow-Methods': 'OPTIONS, GET, POST, PUT, PATCH, DELETE',

一开始我一直以为是在发起请求时加上这些。后来才发现不是，应该修改的是后端，因为当时一直在写前端，也就理所当然的认为是前端的问题。

不同的后端修改方式不同，以本项目为例。

使用的是gin框架，只需要在起路由时加上这么几行，再次请求时就正常了。

        router := gin.Default()
        config := cors.DefaultConfig()
        config.ExposeHeaders = []string{"Authorization"}
        config.AllowCredentials = true
        config.AllowAllOrigins = true
        config.AllowHeaders = []string{"Origin", "Content-Length", "Content-Type", "Authorization"}
        router.Use(cors.New(config))

浏览器差异

跨域问题有时通过这种方法就可以解决，但是我在解决跨域问题后发现，使用chrome浏览器可以正常请求接口地址，当切换到火狐浏览器时就无法正常访问，还是跨域问题。尝试各种方法后，我发现，可能是请求的包有兼容问题。

我之前一直使用的是这个包

import fetch from 'node-fetch'

当换成这个包时

import fetch from "isomorphic-fetch";

就两个浏览都可以正常请求，暂时还没有测试其他的浏览器，作用原理也不是很清楚。

当遇到不同浏览器可能会出现的请求差异时，可以多尝试几个不同的请求方式。例如fetch或者axios等。应该可以初步排除问题。

刚入门前端没多久，前端产生的各种各样的问题都比较多，各种兼容性问题也是一个大坑。