记录跨域处理的问题

根据《尚品汇》的思路，可以在前端配置文件vue-config.js中添加代理服务器的设置，如下所示：

module.exports = {
  lintOnSave: false,
  devServer: {
    proxy: {
      '/api': {
        target: 'http://sph-h5-api.atguigu.cn', // API接口地址
        pathRewrite: { '^/api': '' }
      }
    }
  }
};

这样的配置可以解决前端开发环境下的跨域问题。其原理是添加了一个名为"api"的标识符，当代理服务器识别到请求中带有"api"时，会删除该标识符并将请求转发到目标地址。

然而，在生产环境中，vue-config.js并不存在，即运行`npm run build`生成的代码时，仍然会存在跨域问题。为了解决这个问题，我们需要配置Nginx。以下是一个Nginx配置文件的示例：

server {
  listen 80;
  server_name example.com;//代理服务器地址

  location /api {
    proxy_pass http://backend-server:8080;//API服务器地址
    rewrite ^/api/(.*)$ /$1 break;//删除API标识符
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }

  location / {
    root /path/to/your/static/files;//静态网页目录
    try_files $uri $uri/ /index.html;
  }
}

下面是对配置文件中每个部分的解释：

- `listen 80;`：指定Nginx监听的端口号，这里是80，表示监听HTTP请求。

- `server_name ;`：指定服务器的域名或IP地址。

- `location /api { ... }`：定义一个请求路径的匹配规则，这里是以`/api`开头的路径。当收到以`/api`开头的请求时，Nginx会将请求转发到后端服务器的示例地址，并通过`proxy_set_header`指令设置HTTP请求头，传递一些信息给后端服务器。

- `location / { ... }`：定义另一个请求路径的匹配规则，这里是根路径`/`。当收到其他路径的请求时，Nginx会在指定的根目录中查找对应的静态文件。如果找不到对应的文件，则会返回`index.html`文件。

通过这个配置文件，Nginx可以同时处理静态文件服务和反向代理请求。静态文件请求会被直接返回，而以`/api`开头的请求会被转发到后端服务器。这种配置常用于将前端应用与后端API分离部署的场景，提供更好的性能和灵活性。