小编Joh*_*oza的帖子

我正在为我的新响应式布局测试 CSS 网格，但我遇到了换行问题。

我有一个导航栏，它的标题应该推到左边，4 个按钮应该推到右边。现在的问题是使用：

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))

正如预期的那样，制作 5 个均匀间隔且响应迅速的网格单元。问题是我希望纽扣单元比标题小得多。所以我想要8fr 1fr 1fr 1fr而不是1fr 1fr 1fr 1fr 1fr。如何在保持使用重复自动调整的包装/响应属性的同时做到这一点？

说明问题的 Codepen 示例：https ://codepen.io/johnpyp/pen/ZJxdYK

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.grid>* {
  align-text: center;
  background-color: lightgreen;
  height: 200px;
}

在我的网络服务器上,我有一个文件夹(比如链接:www.foo.com/json/).

在这个链接里面,我有一个json文件,比如foo.json.我想从其他网站访问此文件.我试图研究"CORS",但它似乎很复杂,我在我的网站foo.com上没有使用任何后端.我听说你可以简单地使用php并将其放入:

<?php
header("Access-Control-Allow-Origin: *");

如何将其添加到具有.json的文件夹中,以便在执行时:

$.getJSON("http://foo.com/json/foo.json", function(json) {
    console.log(json
)});

它不会抛出错误.我希望这很容易让任何网站都这样做,我只是不知道如何连接它.

尝试使用Google Strategy OAuth2将Vue + Axios应用程序与带有Passport的快速后端结合使用时遇到问题。

我的express服务器已打开，localhost:5000而vue-cli webpack开发服务器已打开localhost:3000。我正在使用webpack proxyTable选项代理从/api到的请求localhost:5000/api。据说它也处理cors。如果我在Vue应用程序中使用常规的超链接，如<a href="/api/auth/google">Auth with Google</a>，它会按预期工作，但是，如果我尝试使用axios，例如：

async authGoogle() {
  const response = await axios.get('/api/auth/google')
  console.log(response)
}

我从Google api回调中收到此错误：

Failed to load https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A5000%2Fapi%2Fauth%2Fgoogle%2Fcallback&scope=profile%20email&client_id={client_id}: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:3000' is therefore not allowed access.

这些是api路由：

app.get(
  '/api/auth/google',
  passport.authenticate('google', { scope: ['profile', 'email'] })
)

app.get(
  '/api/auth/google/callback',
  passport.authenticate('google'),
  function(req, res) {
    res.json({ success: true })
  }
)

在这种情况下如何使axios正常工作？