js中如何解决跨域问题_前端菜鸟10086的博客-程序员宅基地_js跨域问题的三种解决方案

技术标签: 前端  服务器  javascript  

首先介绍一下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  请求方式是不是POST
    if(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文件

}

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_57205669/article/details/123451411

智能推荐

ios xib 初始化高度_ios – 如何根据XIB中的子视图大小调整超视图的高度?_weixin_39974400的博客-程序员宅基地

使用自动布局,您需要执行以下操作:&gt;确保您没有为任何子视图添加固定宽度和/或高度约束(取决于您想要动态调整的尺寸).我们的想法是让每个子视图的内在内容大小决定子视图的高度. UILabels带有4个自动隐式约束,它们(小于所需优先级)尝试将标签的框架保持在适合所有文本所需的确切大小.&gt;确保每个标签的边缘严格连接(具有必需的优先级约束)到彼此的边缘及其超视图.你想确保如果你想象其中一个标...

王者荣耀为何如此受欢迎_孙正嗯大正的博客-程序员宅基地

王者荣耀是非常受欢迎的,作为手机游戏,用户数一年内过6000万是个挺吓人的数字,而且覆盖人群极其广泛,从小学生到青年人再到中老年人,跨越了00后、90后、80后、70后、60后,这也是很惊人的,当然,也被大家津津乐道各种打法各种竞技各种角色各种梗,总之,王者荣耀是时下非常棒的一款游戏,可以说风靡全国。王者荣耀受欢迎的理由1.王者荣耀设计的适用人群更广泛,无论是技艺高强的游戏大玩家,还是刚刚入门的游戏小白,都可以驾驭这个游戏,找到自己的位置和感觉。这是很多游戏难以具备的,也是因为这样,才获得了从小学生到老

STL基础篇(适合初学者快速入门)_专注客户端技术的博客-程序员宅基地

1.       STL 是什么作为一个C++ 程序设计者,STL 是一种不可忽视的技术。Standard Template Library (STL) :标准模板库, 更准确的说是 C++ 程序设计语言标准模板库。STL 是所有C++ 编译器和所有操作系统平台都支持的一种库,说它是一种库是因为,虽然STL 是一种标准,也就是说对所有的编译器来说,提供给C++ 程序设计者的接口都是一样

将tomcat添加为linux系统服务_ddsheng1128的博客-程序员宅基地

前言  在博客 --》virtualBox安装centos,并搭建tomcat中,讲到了centos下搭建tomcat环境,发现启动tomcat不是那么方便,要是忘记路径了,那就更麻烦了!当然了,忘记路径了也还是有许多方式找回来的,那么有没有什么方式将tomcat设置成系统服务了,就像service iptables start一样用service tomcat start来启动tomcat了...

Hadoop集群之无法直接在HDFS上上传文件_单手提煤气罐的博客-程序员宅基地_hdfs不能上传文件

HDFS无法直接在网站上拖动上传文件,如下图其实很好解决,解决方法如下:编辑配置文件在节点的配置文件core-site.xml中加入如下代码更改环境变量加入如图中的环境变量,然后重启电脑,就可以拖拉上传文件了...

jupyter notebook命令行无法正常启动_skyecs的博客-程序员宅基地_命令行启动jupyter

当jupyter notebook出现SyntaxError: invalid syntax错误Traceback (most recent call last): File &quot;/usr/local/bin/jupyter-notebook&quot;, line 7, in &amp;lt;module&amp;gt; from notebook.notebookapp import main File ...

随便推点

linux上usb的state,USB设备状态设置-- usb_gadget_set_state()_小薇LikC的博客-程序员宅基地

1、USB设备状态在USB 2.0协议中第 9.1 USB Device States 章节规定了USB设备的6种状态,包括:linuxAttached/Powered/Default/Address/Configured/Suspendedapi其状态迁移图以下:less 在 Linux Kernel ch9.h 文件中用 enum usb_device_state 来标记这几种状态。函数// ...

python opengl 教程_python – PyQt OpenGL:绘制简单的场景_weixin_39620278的博客-程序员宅基地

最近我使用PyOpenGL绘制了三角形和多边形等简单场景.代码非常简单,使用不同的GL_TRIANGLES和GL_POLYGON没有提出任何问题.之后我决定将GUI添加到我的应用程序并下载pyqt4.所以现在我从那里使用QtOpenGL,我被卡住了.阅读了几篇教程后,我可以执行的一件事是this.这是代码:ximport sysimport mathfrom PyQt4 import QtCore...

C 语言 define 变参__VA_ARGS__使用_啦啦拉德玛西亚的博客-程序员宅基地

C 语言 define 变参__VA_ARGS__使用在C语言的标准库中,printf、scanf、sscanf、sprintf、sscanf这些标准库的输入输出函数,参数都是可变的。在调试程序时,我们可能希望定义一个参数可变的输出函数来记录日志,那么用可变参数的宏是一个不错的选择。在C99中规定宏也可以像函数一样带可变的参数,如:#define LOG(format, ...) fprintf(stdout, format, __VA_ARGS__) 其中,...表示可变参数列表,_

一年Android工作经验,一举拿下百度、网易,flutterprovider局部刷新_普通网友的博客-程序员宅基地_android 工作经历

面试官是一个很fashion的人,是从小米核心部门过来的,是Android小组的领导。问了关于数据库的一些问题,SQLite的相关操作,没办法,我在华为唯一一个做的和java相关的项目,但是不太擅长数据库。网络相关的问题,网络的五层模型,又问了TCP和UDP,还有Android相关的长连接,这里问的比较深。开始Android先关的知识,Handler机制,Acticity的生命周期以及四种启动模式,各自特点,Service的两种启动模式生命周期,如果同时使用两种启动第一面这就算过关了等待二面。

iOS进阶之页面性能优化_iOS开发面试的博客-程序员宅基地

前言在软件开发领域里经常能听到这样一句话,“过早的优化是万恶之源”,不要过早优化或者过度优化。我认为在编码过程中时刻注意性能影响是有必要的,但凡事都有个度,不能为了性能耽误了开发进度。在时间紧急的情况下我们往往采用“quick and dirty”的方案来快速出成果,后面再迭代优化,即所谓的敏捷开发。与之相对应的是传统软件开发中的瀑布流开发流程。卡顿产生的原因在 iOS 系统中,图像内容展示到屏幕的过程需要 CPU 和 GPU 共同参与。CPU 负责计算显示内容,比如视图的创建、布局计算、图片解码

java.io.IOException: Cleartext HTTP traffic to 10.122.209.150 not permitted android开发错误[email protected]的博客-程序员宅基地

Android 开发错误 java.io.IOException: Cleartext HTTP traffic to 10.122.209.150 not permitted这个错误主要是发生在android9.0系统上因为android9.0系统在安全性方面下了不少功夫;之前一直被认为是系统安全性不如ios,这次Google来真的。这问题主要是因为Android9.0系统上的 andr...

推荐文章

热门文章

相关标签