跨域访问

• 只要协议、主机、端口之一不同，就不同源，例如
  • http://localhost:7070/a 和 https://localhost:7070/b 就不同源
• 同源检查是浏览器的行为，而且只针对 fetch、xhr 请求
  • 如果是其它客户端，例如 java http client，postman，它们是不做同源检查的
  • 通过表单提交、浏览器直接输入 url 地址这些方式发送的请求，也不会做同源检查
• 更多相关知识请参考
  • 跨源资源共享（CORS） - HTTP | MDN (mozilla.org)

请求响应头方式

• fetch 请求跨域，会携带一个 Origin 头，代表【发请求的资源源自何处】，目标通过它就能辨别是否发生跨域
  • 我们的例子中：student.html 发送 fetch 请求，告诉 tomcat，我源自 localhost:7070
• 目标资源通过返回 Access-Control-Allow-Origin 头，告诉浏览器【允许哪些源使用此响应】
  • 我们的例子中：tomcat 返回 fetch 响应，告诉浏览器，这个响应允许源自 localhost:7070 的资源使用
    实例：
    请求方：

学生列表
编号
姓名
性别
年龄

Tomcat响应方：

package com.qwy.controller;import com.inspur.bean.Users;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;import java.util.ArrayList;
import java.util.Collections;
import java.util.List;@Controller
public class HelloController {@RequestMapping("/api/students")//解决不同源跨域访问问题@CrossOrigin("http://localhost:7070")@ResponseBodypublic List getMessage() {Users users1 = new Users(1, "刘备", "男", 12);Users users2 = new Users(2, "张非", "男", 12);Users users3 = new Users(3, "关羽", "女", 12);Users users4 = new Users(4, "刘邦", "男", 12);Users users5 = new Users(5, "诸葛", "女", 12);Users users6 = new Users(6, "刘备", "男", 12);Users users7 = new Users(7, "张非", "男", 12);Users users8 = new Users(8, "关羽", "女", 12);Users users9 = new Users(9, "刘邦", "男", 12);Users users10 = new Users(10, "诸葛", "女", 12);List usersList = new ArrayList();Collections.addAll(usersList, users1, users2, users3, users4, users5, users6, users7, users8, users9, users10);return usersList;}
}

代理方式

npm install http-proxy-middleware --save-dev

在 express 服务器启动代码中加入

import {createProxyMiddleware} from 'http-proxy-middleware'// ...app.use('/api', createProxyMiddleware({ target: 'http://localhost:8080', changeOrigin: true }));

fetch 代码改为

const resp = await fetch('http://localhost:7070/api/students')

或

const resp = await fetch('/api/students')

实例：
前端服务器express 服务器启动代码中（main.js）：

import express from 'express'
import {createProxyMiddleware} from 'http-proxy-middleware'
const app = express()
//代理实现跨域问题解决(以/api开头的地址代理访问http://localhost:8080)
app.use('/api', createProxyMiddleware({ target: 'http://localhost:8080', changeOrigin: true }))
// 添加静态资源的目录
app.use(express.static('./'))
app.listen(7070)

前端页面：

学生列表
编号
姓名
性别
年龄

后端：

package com.qwy.controller;import com.inspur.bean.Users;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;import java.util.ArrayList;
import java.util.Collections;
import java.util.List;@Controller
public class HelloController {@RequestMapping("/api/students")//解决不同源跨域访问问题// @CrossOrigin("http://localhost:7070")@ResponseBodypublic List getMessage() {Users users1 = new Users(1, "刘备", "男", 12);Users users2 = new Users(2, "张非", "男", 12);Users users3 = new Users(3, "关羽", "女", 12);Users users4 = new Users(4, "刘邦", "男", 12);Users users5 = new Users(5, "诸葛", "女", 12);Users users6 = new Users(6, "刘备", "男", 12);Users users7 = new Users(7, "张非", "男", 12);Users users8 = new Users(8, "关羽", "女", 12);Users users9 = new Users(9, "刘邦", "男", 12);Users users10 = new Users(10, "诸葛", "女", 12);List usersList = new ArrayList();Collections.addAll(usersList, users1, users2, users3, users4, users5, users6, users7, users8, users9, users10);return usersList;}
}