myblog

Appearance

10、安装Nginx部署前端项目 ​

1、安装Nginx ​

官网:https://nginx.org/

安装：https://nginx.org/en/linux_packages.html

本次采用yum安装

bash
sudo yum install nginx -y

2、Nginx常用目录 ​

  • nginx.conf
    • /etc/nginx
  • 静态文件
    • /usr/share/nginx

3、Nginx启动命令 ​

bash
# 启动
sudo systemctl start nginx

# 查看状态
systemctl status nginx

# 重载配置文件
sudo nginx -t       # 先测试配置文件是否有误（强烈推荐）
sudo systemctl reload nginx

4、初始化一个VUE项目 ​

bash
# 使用 Vue CLI 初始化
# 安装 Vue CLI（如果还没装）
npm install -g @vue/cli

# 创建项目
vue create my-vue-app

# 进入项目目录并启动
cd my-vue-app
yarn serve

后端跨域 ​

  • @CrossOrigin
java
/**
 * @Author: xueqimiao
 * @Date: 2025/7/28 16:30
 */
@RestController
@CrossOrigin
public class TestController {

    // http://127.0.0.1:8001/test
    @RequestMapping("/test")
    public String test() {
        return "hello";
    }

}
  • 配置文件
java
package com.xx.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.HttpHeaders;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOriginPatterns("*") //允许跨域的域名，可以用*表示允许任何域名使用
                        .allowedMethods("*") //允许任何方法（post、get等）
                        .allowedHeaders("*") //允许任何请求头
                        .allowCredentials(true) //带上cookie信息
                        .exposedHeaders(HttpHeaders.SET_COOKIE)
                        .maxAge(3600L); //maxAge(3600)表明在3600秒内，不需要再发送预检验请求，可以缓存该结果
            }
        };
    }
}