前言

https://github.com/code-coder/next-mobile-complete-app github :

我使用Next.js已经快两个月了，项目已经测试过了。在这里，我总结一些开发部署过程中遇到的棘手问题。

不治之症

1.手机飞越：auto，ios滚动受阻

解决方案：在主容器中加入style-WebKit-overflow-scrolling : touch；

2.devmode路由跳转后，样式会丢失

原因：dev下的样式是根据页面动态加载的，浏览器缓存了style . chunk . CSS文件，导致样式没有更新。

解决方案：用版本号强制重新加载样式文件

例1:

//head title { title }/title { process . env . node _ env！=='production' (link rel='样式表' type=' text/CSS ' href={ '/_ next/static/CSS/style . chunk . CSS？V=' Router.route} /)}/Head示例2:

//从_app.js中的‘next/Router’导入Router；router . events . on(' RouteChangeComplete '，()={ if (process.env.NODE_ENV！==' production '){ const els=document . queryselectorall(' link[href *='/_ next/static/CSS/style . chunk . CSS ']')；常量时间戳=新日期()。value of()；els[0]。href='/_ next/static/CSS/style . chunk . CSS？v='时间戳；}});3、安卓键盘弹出的窗口会变小，flex或位置是绝对的或固定的布局会改变

将body.height直接设置为浏览器的窗口高度。

doc . body . style . height=Docel . client height ' px '；4.跨域和cookie传递

第一步，api服务器在成功登录后返回cookie。

跨域访问需要接收cookie，解决方案很简单。API服务器只需要根据请求的地址将“访问控制-允许-来源”的值设置为请求地址的ip(测试环境可以动态设置这个ip，生产可以设置指定的域名或ip地址)。

第二步，浏览器自动缓存它，然后在后续请求中携带这个cookie。

默认情况下，提取或axois请求没有cookie，需要通过选项配置打开。

-提取以配置`{凭据： '包括'，模式：' CORS'} `。

-axois想配置` axios默认值；带凭证=真；`

此外，api可以通过服务器代理通过内部网访问。

我公司采用以下解决方案：

为了解决跨域修改api地址和部署不同服务器的问题，我们使用了前端服务器代理dns解析。整个过程如下图所示：

通过NODE_ENV环境变量配置开发和生产地址。

const ISprod=process . ENV . NODE _ ENV===' production '；process.env .后端_URL=isProd？/relative _ URL ' : ' http://text . API.com '；process.env .后端_URL_SERVER_SIDE=isProd？http://BFF . API.com ' : ' https://prod . API.com '；module.exports={'process.env .后端_ URL' :process.env .后端_ URL，//客户端呈现请求是相对地址。前端服务器代理到API服务器' process.env .后端_ URL _ server _ side ' : process . env .后端_ URL _ server _ side/，是API服务器的地址，只能通过内网访问。5.服务器呈现时的cookie请求问题

这里使用了一个名为nookies的插件。

在_app.js中全局解析cookies并注入ctx:

静态异步getInitialProps({ Component，CTX }){ let page props={ }；让cookie={ }；if(CTX . isserver){ cookies=parseCookies(CTX)；} if(component . getinitialprops){ page props=await component . getinitialprops({ CTX，cookies })；}返回{ PageProps }；}然后您可以通过页面请求：

静态异步getInitialProps({ CTX }){ const { store，req，isServer，cookies }=ctxstore . dispatch(set nav({ nav title : ' Home '，ishome : true })；store . dispatch(getDataStart({ settings : { isServer，cookies } })；}在proxyFetch中，它会根据isServer的值来区分是服务器API请求还是客户端API请求。服务器请求会将cookies写入Fetch的头中。

常数前缀=isServer？process.env。后端_ URL _ SERVER _ SIDE :进程。环境。后端_网址；是服务器(这。标头[' cookie ']=' EGG _ SESS=' cookie[' EGG _ SESS ']'；'；)//提取核心获取(前缀url，{ headers: this.headers，这个。初始化，选项})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。