网络安全-跨域-6: 如何解决跨域- Nginx 反向代理

Nginx 则是通过反向代理的方式，（这里也需要自定义一个域名）这里就是保证我当前域，能获取到静态资源和接口，不关心是怎么获取的。

Step-1: 配置host

127.0.0.1 leslie.test

Step-2: 配置nginx

server {
        listen 80;
        server_name leslie.test;
        location / {
            proxy_pass http://localhost:8080;
        }
}

启动 nginx - start nginx
重启 nginx - nginx -s reload

前端代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nginx 跨域</title>
</head>

<body>
    <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
    <script>
        axios.get("/user").then(res => {
            console.log(res.data);
        });
    </script>
</body>

</html>

后端代码

const http = require('http');
const path = require('path');
const url = require('url');

http.createServer(function (req, res) {
  // console.info(req)
  const reqUrl = url.parse(req.url, true);
  switch (reqUrl.pathname) {
    case '/user':
      let blogs = require('./blog.json');
      res.setHeader('Content-type', 'text/json; charset=utf-8');
      // res.setHeader('Access-Control-Allow-Origin', req.headers.origin);
      res.setHeader('Access-Control-Allow-Origin', '*');
      // 需要cookie等凭证是必须
      res.setHeader('Access-Control-Allow-Credentials', true);
      res.end(JSON.stringify(blogs));
      break;
    default:
      res.writeHead(404, 'not found');
  }
}).listen(8080, (err) => {
  if (!err) {
    console.log('8080已启动');
  }
});

测试

# http://leslie.test:8080/user
http://leslie.test/user
posted @ 2020-08-20 15:10  荣光无限  阅读(216)  评论(0)    收藏  举报