前端笔记一：关于前端解决跨域问题

最新推荐文章于 2025-08-22 11:32:18 发布

autismWu

最新推荐文章于 2025-08-22 11:32:18 发布

阅读量308

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端笔记文章标签：前端跨域

本文链接：https://blog.youkuaiyun.com/qq_36409128/article/details/86083976

前端笔记专栏收录该内容

1 篇文章

订阅专栏

在前端开发中，遇到跨域问题是常见的挑战。本文介绍了同源策略及其安全考虑，并详细梳理了应对跨域的解决方案，包括静态页面的处理、jQuery的JSONP、Node.js搭建服务以及Vue项目的开发环境和线上环境下的跨域配置。通过对这些方法的理解和应用，可以有效地解决前端开发中的跨域问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端笔记一：关于前端解决跨域问题

问题出现：

问题出现：

最近在实习公司的一个项目，后台还在数据设计阶段，根据原型图写出静态页面（要求使用jq的一个框架写页面）,闲来没事，想到mock.js可以模拟数据，于是自己模拟了一些假数据，准备做加载显示，发现了关于跨域的问题。以前关于跨域有过一定的了解知道大概的jsonp，这次又碰见了，想着整理一下自己遇到的跨域的解决方法。

关于跨域

同源策略

请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.

为了安全考虑，浏览器是不允许跨域的

http://localhost:63342/MDM/static/menu/menu.html
|
V
http://localhost:8888/getPharmacology

浏览器会报错：如下
报错详情

解决方式（碰到过的）

请求的是静态页面：

被请求的页面中添加以下代码

<meta http-equiv="Access-Control-Allow-Origin" content="*" />

请求的json数据：

jq通过 jsonp:

$.ajax({
		url: "http://localhost:8888/getPharmacology",
		type: "GET",   //get请求方式,只支持get，不支持post
		dataType: "jsonp",
		jsonp: "callback",
		success: function (data) {
			console.log(data);
		}
});

node.js（此次遇到的解决方法）:

通过node.js下载express模块搭建服务；和获取静态页面的方式相似

app.get("/getPharmacology",function(req,res){
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.send(JSON.stringify(pharmacology));
});

vue的解决方式(开发环境和线上环境)

vue是通过axios获取数据

开发环境

在配置文件里config/index.js加上以下代码

proxyTable: {
    '/api': {
        target:'http://localhost:8888',
        changeOrigin: true,
         pathRewrite: {
          '^/api': '/'
        }
    } 
}

在main.js中添加vue的原型；这里添加了一个rootPath 是为了线上版本

import  Axios from 'axios';
Vue.prototype.$axios=Axios;
Vue.prototype.rootPath= '/api';

在需要请求的文件里请求文件时：

this.$axios.get(this.rootPath+"/getPharmacology").then(res=>{
	console.log(res);           
}).catch(error=>{
	console.log(error);
})

线上环境

当项目上线之后，一个项目是不存在跨域问题，所以不需要做跨域处理，直接操作main.js里面添加了一个rootPath，本着偷懒的原理，其他文件就可以不修改了；

import  Axios from 'axios';
Vue.prototype.$axios=Axios;
Vue.prototype.rootPath= '';

小结

总结自己碰到的跨域，减少碰见重复问题；