首先介绍一下js的同源策略

同源策略是浏览器的一项安全策略，浏览器只允许js 代码请求和当前所在服务器域名,端口,协议相同的数据接口上的数据,这就是同源策略.

也就是说，当协议、域名、端口任意一个不相同时，都会产生跨域问题，所以又应该如何解决跨域问题呢？

以下是三种解决跨域问题的方法：

Jsonp --- 只能处理get请求，且不是ajax请求

jsonp跨域的原理是什么?

动态在页面中创建一个script标签，使其src属性指向后端数据接口，也就是说，script会发送一个get请求到src指向的地址，而这个src地址就是我们请求的服务接口。

其中callback参数就是核心所在，因为后端数据接口必须返回一个js函数的调用字符串（如cb('{"name":"zs","age":18)}'）将要返回给前端的数作为函数的实参，当script标签加载完毕之后会在浏览器中执行后端返回的函数调用

这里必须使用script标签，否则返回的数据不会被当作js执行

借助script标签中的src 地址写入url地址并且用?拼接要传入的参数

<button id="btn">点击</button><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><script>$('#btn').click(function(){var frame = document.createElement('script');frame.src = 'http://localhost:3000/article-list?name=leo&age=30&callback=func';$('body').append(frame);});function func(res){alert(res.message+res.name+'你已经'+res.age+'岁了');}</script>

这里可以看到，我们声明了一个func函数，但没有执行，如果服务端接口到get请求，返回的是func({message:'hello'})，这样的话在服务端就可以把数据通过函数执行传参的方式实现数据传递

服务端代码：

router.get('/article-list', (req, res) => {console.log(req.query, '123');let data = {message: 'success!',name: req.query.name,age: req.query.age}data = JSON.stringify(data)res.end('func(' + data + ')');
});

Cors --- 任意请求都可以解决，且发送的是ajax请求

在后台响应头中设置 res.setHeader("Access-Control-Allow-Origin","*")//*代表着任何一方的请求和响应

let queryString = require("querystring") //处理post请求的
let http=require("http")
let url=require("url")
let cors = require("cors")http.createServer((req,res)=>{let {pathname}=url.parse(req.url,true)//判断请求路径是不是post  请求方式是不是POSTif(pathname=="/post" && req.method=="POST"){let data=""// 每一次的传递req.on("data",msg=>{  //msg是回调函数的形式console.log(msg);data+=msg//拼接})console.log(data);// 全部传输完毕req.on("end",()=>{res.setHeader("content-type","application/json")//响应头res.setHeader("Access-Control-Allow-Origin","*")//*代表着任何一方的请求和响应let str={...queryString.parse(data),_d:Date.now()}console.log(queryString.parse(data));res.end(JSON.stringify(str),()=>{console.log("本次请求完毕",str);})})}
}).listen(3000,console.log("run..."))

服务器代理proxy

以下代码一般解决跨域请求数据问题

module.exports = {devServer:{port:5520,  //前端端口号host:'localhost',  //主机名https:false,open:true,  //启动服务时自动打开浏览器// proxy是代理  其内容主要是为了解决*跨域问题*proxy:{// 替换所有以'/dev-api'开始的地址// process.env.VUE_APP_BASE_API 相当于 '/dev-api'（在常量中已经定义完成了）// 匹配以'/dev-api'开头的请求[process.env.VUE_APP_BASE_API]:{// 目标服务器：'http://localhost:3000'（就是后端接口）target:process.env.VUE_APP_SERVICE_URL,changOrigin:true,  //开启代理pathRewrite:{/* 将'/dev-api'替换为空串''将'http://localhost:8001/dev-api/db.json'替换为'http://localhost:8001/db.json'*/['^'+process.env.VUE_APP_BASE_API]:''}}}},lintOnSave:false,  //关闭代码风格检查productionSourceMap:false   // 不生成.map文件}

js中如何解决跨域问题相关推荐

【全栈项目上线（vue+node+mongodb）】06.nodejs服务上线（生产环境前后分离的vue项目中怎么解决跨域问题）...
以下操作使用下面项目为案例 https://github.com/itguide/vnshop ## 启动node服务克隆好项目后记得把依赖包安装好 npm i 使用 node 启动node服务 c ...
在Vue2中怎么解决跨域
Vue中怎么解决跨域问题协议域名端口相同为同域否则都为跨域这就是需要用跨域来请求数据的报错第一步:在vue项目中的跟目录下创建一个 vue.config.js ,文件名是固定的,不一样就会报错 ...
java解决跨域问题_Java项目中如何解决跨域问题
Java项目中如何解决跨域问题发布时间:2020-11-11 16:00:40 来源:亿速云阅读:91 作者:Leah Java项目中如何解决跨域问题?很多新手对此不是很清楚,为了帮助大家解决这个 ...
一步步教你前端vue项目开发中如何解决跨域问题
文章目录开发环境中跨域名词解释 1.同源策略: 2.同源: 3.跨域: 4.代理服务器: 解决方式项目背景跨域配置 1.配置说明: A.参数proxy详解: B.pathRewrite详解: ...
ajax中cors解决跨域,AJAX 跨域 CORS 解决方案
两种跨域方法在 Javascript 中跨域访问是比较常见的事情就像现在比较流行写单页应用,而单页应用在访问 API 的时候就会有跨域的问题要解决跨域的问题,其实也并不复杂,有两种方案可以选择 ...
js使用iframe引入youtube视频到页面中播放,解决跨域播放
首先肯定要能翻墙了,才能播放youtube视频直接上代码这里的主要原理是使用的embed-container,这是一个html的 class 实际标签是这样的,iframe中引入的youtube视 ...
mui后端开发php,PHP解决mui中ajax的跨域问题
什么是跨域访问在A网站中,我们希望使用Ajax来获得B网站中的特定内容.如果A网站与B网站不在同一个域中,那么就出现了跨域访问问题.你可以理解为两个域名之间不能跨过域名来发送请求或者请求数据,否则就 ...
Vue项目开发过程中解决跨域问题（vue.config.js结合axios）
一.问题描述在本地开发过程中,调用后端提供的接口获取数据将获取的数据渲染到页面中,但是浏览器报错: // 控制台报错信息 Access to XMLHttpRequest at 'http://x. ...
【vue.js开发】如何在vue里面优雅的解决跨域，路由冲突问题
[vue.js开发]如何在vue里面优雅的解决跨域,路由冲突问题当我们在路由里面配置成以下代理可以解决跨域问题 proxyTable: {'/goods/*': {target: 'http://l ...
Vue项目中你是如何解决跨域的呢？
Vue项目中你是如何解决跨域的呢? 一.跨域是什么跨域本质是浏览器基于同源策略的一种安全手段同源策略(Sameoriginpolicy),是一种约定,它是浏览器最核心也最基本的安全功能所谓同源( ...

js中如何解决跨域问题