网站空间10g,网站建设评价标准,福建百度推广,如何做翻唱网站自己写了一个项目#xff0c;写好了#xff0c;发现不会部署#xff0c;然后到处查资料#xff0c;最终终于部署好自己写的系统#xff0c;系统为前后端分离项目。需要分别部署在同一个服务器docker中#xff0c;配置不同得端口隐射#xff0c;部署得过程中主要是跨域问…自己写了一个项目写好了发现不会部署然后到处查资料最终终于部署好自己写的系统系统为前后端分离项目。需要分别部署在同一个服务器docker中配置不同得端口隐射部署得过程中主要是跨域问题导致在前端部署得vue项目访问不了后端数据。下面先进行前端部署
1部署前端vue
1.1 开发环境下解决跨域问题
首先生产环境下解决跨域问题适用于开发环境即在后端配置跨域问题可以解决 如果不配置后端的话就配置下前端vue开发环境下解决跨域问题是用vue-cli作为代理解决的跨域问题使用Webpack的开发服务器来进行代理配置具体配置如下 一·第一步
module.exports {devServer: {proxy: {port: 8081,// vue运行端口号host: 0.0.0.0,/api: {target: http://your-spring-boot-server:8080, // 后端Spring Boot项目地址changeOrigin: true,pathRewrite: {^/api: }}}}
};二·第二步
const http axios.create({baseURL: /api, // 以访问以api开头timeout: 10000,}
)重启前端项目 注意在生产环境中为了解决跨域问题你不能再使用Webpack的开发服务器来进行代理配置。代理配置只适用于开发环境。 Vue的代理配置是为了在开发环境中解决前后端分离开发时的跨域问题。当你在开发阶段使用npm run serve命令启动本地开发服务器时Vue会根据vue.config.js中的代理配置将特定请求代理到后端API服务以解决跨域问题。这样在开发阶段就可以顺利发起跨域请求与后端API进行交互。但是一旦将Vue项目打包部署到生产环境中通过vue-cli-service build生成的静态资源文件会被部署在Web服务器中例如Nginx、Apache等。这时Vue的代理配置将不再生效因为所有的前端请求都会直接发送到部署的Web服务器而不再通过vue.config.js中的代理配置。
1.2 生产环境下解决跨域问题
下面提供两种方法任选其一即可 1.在Spring Boot应用的Controller类上添加**CrossOrigin**注解 注意
springMVC的版本要在4.2或以上版本才支持CrossOrigin非CrossOrigin没有解决跨域请求问题而是不正确的请求导致无法得到预期的响应导致浏览器端提示跨域问题。在Controller注解上方添加CrossOrigin注解后仍然出现跨域问题解决方案之一就是在RequestMapping注解中没有指定Get、Post方式具体指定后问题解决。其中CrossOrigin中的2个参数origins 允许可访问的域列表 maxAge准备响应前的缓存持续的最大时间以秒为单位。可以配置在Controller上 也可以配置在方法上。 2.在Spring Boot中你可以使用Spring Web提供的CORS支持来解决跨域问题。Spring Boot提供了配置选项来设置允许访问的域名、请求方法、请求头等。 在你的Spring Boot项目中你需要添加一个CORS配置类来设置CORS头。 import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;Configuration
public class CorsConfig implements WebMvcConfigurer {Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping(/**) // 需要配置跨域的接口路径可以使用通配符.allowedOrigins(http://ip地址:端口) // 允许访问的域名可以使用通配符如*表示允许所有域名.allowedMethods(GET, POST, PUT, DELETE) // 允许的请求方法.allowedHeaders(Content-Type) // 允许的请求头.allowCredentials(true); // 允许携带凭证例如cookies}
}注意配置类文件一定要写在启动类所在的包下否则不生效。可以新建一个config包在里面创建配置文件 在上面的示例中我们创建了一个CorsConfig类并实现了WebMvcConfigurer接口然后在addCorsMappings方法中设置了CORS头。
“registry.addMapping(“/admin/**”)”这里可以设置需要进行CORS配置的接口路径/**通配符表示匹配所有路径也可以根据实际情况设置具体的路径。allowedOrigins(“http://localhost:8081”)这里设置允许访问的域名可以使用通配符*表示允许所有域名。allowedOrigins(“http://localhost:8081”)这里设置允许访问的域名可以使用通配符*表示允许所有域名。allowedHeaders(“Content-Type”)设置允许的请求头这里只允许Content-Type头。allowCredentials(true)设置允许携带凭证例如cookies。 注意在生产环境中不要使用通配符 * 来允许所有域名访问API这是不安全的做法。应该根据具体情况设置允许访问的域名。 这样配置完后前端不用配置vue.config.js文件了vue.config.js配置的跨域代理只在生产环境下有效只需要在创建axios实例或者使用axios时设置baseURL进行配置后端请求地址即可 // 创建一个 axios 实例
const http axios.create({baseURL: http://你的ip:端口号/admin, timeout: 10000,}
)