五大方法——解决同源策略的跨域CORS

最新推荐文章于 2024-08-15 07:00:00 发布

JuckZhang

最新推荐文章于 2024-08-15 07:00:00 发布

阅读量2.1k

点赞数

分类专栏：跨域 CORS 同源策略文章标签：跨域 CORS 同源策略

本文链接：https://blog.csdn.net/qq_36249238/article/details/94611322

版权

本文详细介绍了五种解决跨域问题的方法，包括JSONP、jQuery的jsonp插件、CORS、浏览器插件以及使用代理服务器。其中，CORS允许通过在服务器端设置响应头来实现跨域请求，而JSONP则受限于GET请求。对于非GET请求，jQuery的jsonp插件提供了解决方案。此外，还可以借助浏览器插件如CORS Anywhere，或者通过代理服务器如nginx、vue-cli的proxy进行跨域配置。

摘要由CSDN通过智能技术生成

方案一 jsonp

服务端

/*
比如这是要跨越请求的接口
那么接口要返回text/javascript格式的数据
并且用回调函数的名字封装一个返回值，通过send方式返回，拼接的字符串类似于：callback(a,b,c,...)
*/
app.get('/cors', function(req, res, next) {
   
    // 获取回调函数的名称，等会封装返回值要用到
    var _callback = req.query.jsoncallback;
    // 
    var param1 = [['aa','bb'],['cc','dd'],['ee']]
    var param2 = {
   'name':'juck', 'password':'admin'}
    // 返回值类型为javascript，否则会出现警告
    res.type('text/javascript');
    // 封装返回值
    res.send(_callback + '(' + JSON.stringify(param1) + ',' + JSON.stringify(param2) + ')');
});

1. javascript使用jsonp：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 实例</title>
</head>
<body>
    <div id="divCustomers"></div>
    <script type="text/javascript">
function callbackFunction(result, methodName)
        {
    
            var html = '<ul>';
            for(var i = 0; i < result.length; i++)
            {
    
                html +=