百度网盘做存储网站南宁seo教程
前后端分离项目的基础：
前后端跨域访问
vite.config.js中加入
// 1.为什么要跨域
//因为浏览器的同源策略,不同站点之间访问需要跨域
//实现跨域的方式：server: {proxy: {// 假设要跨域访问的后端 API 地址以 /api 开头'/api': { //表示拦截以/api开头的请求路径target: 'http://localhost:8089/', // 后端服务的实际地址changeOrigin: true, //是否开启跨域rewrite: (path) => path.replace(/^\/api/, ''),//把/api变成空字符串},},},完整vite.config.js文件
import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},// 1.为什么要跨域
//因为浏览器的同源策略,不同站点之间访问需要跨域
//实现跨域的方式：server: {proxy: {// 假设要跨域访问的后端 API 地址以 /api 开头'/api': { //表示拦截以/api开头的请求路径target: 'http://localhost:8089/', // 后端服务的实际地址changeOrigin: true, //是否开启跨域rewrite: (path) => path.replace(/^\/api/, ''),//把/api变成空字符串},},},
})
App.vue文件
<template><button @click="handleClick">跨域请求</button>
</template><script setup>
import axios from 'axios'; // 正确从 'axios' 包导入 axios //将axios请求写在方法里面,通过点击事件调用方法向后端拿数据function handleClick(){axios.get("api/Axios").then(Response=>{console.log(Response.data);}).catch(error=>{console.log('Error fetching data:',error);},)}
</script><style scoped></style>
Java中的servlet 服务
需要在maven的pom.xml中导入fastjson
<dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.76</version></dependency>package Study.day08;import com.alibaba.fastjson.JSON;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;@WebServlet("/Axios")
public class Axios extends HttpServlet{@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {Student student=new Student("张三","男",23);req.setCharacterEncoding("utf-8");resp.setContentType("text/json; charset=utf-8");resp.getWriter().println(JSON.toJSON(student));}
}
后端服务访问页面：
前端成功拿到后端数据：