![032232fb8a356b18e70a8c63821a14c1.png](https://i-blog.csdnimg.cn/blog_migrate/576b7e6a171bfce2973e6f809f7512eb.jpeg)
全栈开发时使用到的开源后端项目。
https://github.com/ruilisi/go-pangugithub.com教程
xingo:用go搭建高效rest api服务(使用postgresql,redis,gin,gorm...)zhuanlan.zhihu.com![05c02625370a2903d2411afd5faeb4bc.png](https://i-blog.csdnimg.cn/blog_migrate/911cd600192ae83b8eb7f067667f67d8.png)
更多的依托此项目的全栈开发的文档说明,请点击我的头像,查看文章。前端框架将会在之后开源。
问题情况
在前端开发的时候,我遇到过这样的问题。
![045c65a7bf8882e6692a88e4aa28bb9d.png](https://i-blog.csdnimg.cn/blog_migrate/904ebd4ef0377f090537807ea18ecb1a.jpeg)
其中最重要的一个词就是“cors”,我一查,原来是跨域问题。
网上有一种解决方法。
![6b8ddeb5ad6be891997ff624e38c1313.png](https://i-blog.csdnimg.cn/blog_migrate/5b41404fc3108a74e2aaf27bcefe6495.jpeg)
也就是修改头,加上这几个东西。
// '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等。应该可以初步排除问题。
刚入门前端没多久,前端产生的各种各样的问题都比较多,各种兼容性问题也是一个大坑。