系统跨域解决

最新推荐文章于 2026-03-18 15:06:59 发布

原创最新推荐文章于 2026-03-18 15:06:59 发布 · 490 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

浩明

收录于

解决方案

本文详细介绍了如何通过Nginx、JSONP、CORS协议解决前端Vue与后端NodeJS项目中的跨域问题，包括SpringBoot CORS配置、Vue Axios使用示例及node.js代理设置。

跨域问题解决方式：

一：nginx:通用与各种请求

1、进行当前服务器的根路径拦截之后，做转发处理【利用nginx中的反向代理】

二：JSONP：只适用于get请求

1、在ajax中携带关键字dataType: 'JSONP',
	利用window.open(进行跨系统页面打开)
2、JSONP这个关键字是JQ进行封装之后的模样，
	内部其实是通过script标签来调用服务器提供的js脚本

三：CORS:跨域资源共享（Cross-origin resource sharing）现在主流

1、需要服务器CORS接口，实现跨域通信【后端实现】
  1.1、CorsConfig:【springboot2.0形式、主流】  
  1.2、原生态:过滤器形式：
  1.3、http后台转发：
  1.4、springcloud网关转发：

2、请求分为两部分：

  一部分为简单请求：前端请求不做预请求
     get
    head
    post
    返回的格式分为：text/plain、multipart/form-data、application/x-www-from-urlencoded【仅限于以上内容格式】

1、在请求头中origin字段加入:对应跨域系统所实现的源、将成功返回
2、简单请求需要设置withCredentials为true|可以携带cookie信息、ssl凭证和用户信息|同域下没有作用

 $.ajax({
		      type:post,
			  url:"",
			  xhrFields:{
			      withCredentials:true
			  },
			  crossDomain:true,
			  data:{
					请求数据
			  },
			  dataType:"json",
			  success: function(result) {
			  
			  },error:function(error){
			  
			  }
		  });

二部分：

put
delete
connect
options
trace
patch
text/plain、multipart/form-data、application/x-www-from-urlencoded【限于以上内容格式】

1、以上内容浏览器会做一个预请求：看服务器端是否支持该请求，否则前端响应不支持信息
2、network会出现两次请求，一次为预检请求，一次是通过后的请求，
3、第一次预检请求通过后会在头部多返回一下三个字段内容：
Access-Control-Allow-Headers: 源的支持的头信息
Access-Control-Allow-Methods: 源所支持的方法
Access-Control-Allow-Origin: 源的地址
4、第二次是通过后的请求：携带以上三个字段，然后进行请求，返回结果集。

四：VUE实现跨域CORS

	        前台：8080
				login:function(){
				  this.$axios.post('请求地址',请求体).then(res=>{
				     console.log(res.msg);
				  })
				
				}



			后台：8081
			控制层做springboot注解：
			//1、注解方式2、全局方式
			@CrossOrigin(origins="/允许的地址|前端请求的地址",maxAge=3000)
			@RequestMapping("/loggin")
			@ResponseBody
			public String loginTest(){
				LOGGER.error("登入成功");
				return "登入成功";
			}
			CrossOrigin：
			origins：允许访问的域列表
			maxAge：缓存的最大时间

五：nodeJS【针对vue-cli项目】

     服务端：8888
		     启动一个server：监听端口
  // server.js
		// 引入express中间件 			let express = require('express'); 			let app = express();

		// 定义api 发送数据 			app.get('/api', (req, res) => {
			res.json({ name: 'hahaha' }) 			})

		app.get('/test', (req, res) => {
			res.json({ name: 'this is a test' }) 			})

		// 监听服务端口 			app.listen(8888, () => {
			console.log('web server running at http://localhost:8888'); 			});

```javascript
  客服端：8080
     发送ajax
	 export default {
		// ...将axios作为$http挂载在全局
		async created() {
			let data = await this.$http.get('/api');
			console.log(data);
		}
	}

		 需要在node.config.js中加入配置，做中转：
			对所有跨域的客户端做代理中转到后台
			module.exports = {
			// ...
				devServer: {
					proxy: {
					'/api': {
						target: 'http://localhost:8888', // 代理跨域目标地址【后台地址】
						changeOrigin: true, 
						// pathRewrite: { // 可选 地址重写 ||前台跨域请求的白名单地址
						// '^/api': ''
						// }
					}
					}
				}
			}