浅谈nuxt跨域和options请求相关问题的解决，涉及前后端解决方案。

关于vue跨域解决网上教程很多，由于使用客户端渲染的方式,推荐前端使用proxy就能解决跨域问题。

本文重点nuxt服务端渲染该如何解决跨域问题和复杂post带来的options请求问题解决。

1. nuxt跨域前端不能使用proxy来简单解决

案例还原：

nuxt页面渲染完成前发起一个异步请求，用于数据加载

再看我对axios的封装

nuxt.config.js中对api的定义，对应的是我的服务端域名

此处按理来讲使用proxy应该不存在跨域问题了，在vue中使用客户端渲染也不会存在问题。

然而nuxt中却出现了跨域问题，页面渲染前的请求全部跨域，渲染完成的页面请求没有跨域问题。原因：个人分析是proxy不能在服务端起作用，也就是说渲染前的axios请求在服务端执行，渲染后页面再发起axios请求在客户端执行，在客户端时proxy会起作用。

2.nuxt跨域解决

前端尝试多次没能解决跨域问题，遂决定不使用proxy改为后台解决跨域问题（前后端一人开发就是这么任性）。

不使用proxy中定义的api，重新设置默认请求的后台域

查了一些教程基本都是后台设置("Access-Control-Allow-Origin", "*")解决跨域，附:后端通用处理方式

按网上方法将后台设置完成，又出现了新的问题

这边我也贴出了出现该问题的原因 www.jb51.net/article/137…

原因是我在axios封装中设置了

改为false就能解决问题，然而我用了token验证就必须为true

可以看到我在post请求的header中携带了token,所以后台将不能使用("Access-Control-Allow-Origin", "*")，于是更改后台代码

将*改为我前端的域，那么是否意味着其他的域就不能访问了呢，目前是这样的。然而我想过项目部署的时候可以利用Nginx作反向代理，用户的请求将由Nginx发起给后台，此处对应配置Nginx的域就行了。

2.跨域的问题基本解决了，还有一个问题没得到解决就是复杂post会有一个options的预请求。

怎样就是复杂的post呢

例如我这边用了JSON传输，并且头部还携带了token信息。

网上教程偏向引导前端将复杂post改为简单post来解决问题，我没有回避问题，前端依然使用复杂post请求，后端对options请求做处理，坏处就是会增加后台的一点负担（前后端都分离了这些影响应该不大）。

完整后端解决跨域和options代码

本人使用go-gin框架写了这么一个中间件，重点是if的判断，必须写在最后。原因是前端预请求的目的是需要后台返回一些后台规定的请求配置，同时http.StatusOK代表200状态码告诉前端可以继续请求。if如果写在上边前端得到了200状态码却没有得到它想要的后台配置，属于忽悠前端的行为。另附关于Access-Control-Max-Age 的使用介绍blog.csdn.net/john1337/ar…

写完这个中间件就可以挂在路由上了

不同后台语言写法不同，思路大致是一样的。

到此一些问题都得到还算可以的解决方法，作为新人需要摸索的还有很多，希望能帮到一些同在摸索中的人，有好的建议好的方法都可以向我提。

最后附上上面涉及到的代码 前端代码地址github.com/nlh1996/bbs

后端地址github.com/nlh1996/bbs… 觉得还行的话给颗星

转载于:https://juejin.im/post/5be9233de51d452ceb51d637