vue3学习-跨域

最新推荐文章于 2024-10-09 22:14:20 发布

阿喵要飞翔

最新推荐文章于 2024-10-09 22:14:20 发布

阅读量891

点赞数

分类专栏： vue3学习文章标签：学习前端 javascript

本文链接：https://blog.csdn.net/amiaoyaofeixiang/article/details/128893764

版权

vue3学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

跨域是浏览器的安全策略，限制了不同源之间的请求。解决跨域的方法包括jsonp（只支持GET，常用于简单查询），CORS（需后端配合设置Access-Control-Allow-Origin），以及开发环境常用的proxy代理。上线后，通常使用nginx等服务器进行代理转发。

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

1.什么是跨域

主要是浏览器设置的一个安全策略，即为同源策略限制。
如果请求的url的协议、域名、端口其中一个与当前页面的url不同的时候就会出现跨域。

2.解决方式

2.1 jsonp

基本实现原理是利用HTML元素中的script标签没有跨域限制，可以动态地创建script标签。

缺点：只能发出get请求，不能使用post请求。
使用范围：百度中在搜索框中的搜索就是使用jsonp；

function clickButton() {
    let obj, s
    obj = { "table":"products", "limit":10 }; //添加参数
    s =  document.createElement("script"); //动态创建script
    s.src = "接口地址xxxxxxxxxxxx"  + JSON.stringify(obj);
    document.body.appendChild(s);
 }
//与后端定义callback名称
function myFunc(myObj)  {
    //接受后端返回的参数
    document.getElementById("demo").innerHTML = myObj;
}

2.2 cors

缺点：只有后端设置，前端设置不了的。


{
  "Access-Control-Allow-Origin": "http://web.xxx.com" //可以指定地址
}

{
  "Access-Control-Allow-Origin": "*" //也可以使用通配符 任何地址都能访问 安全性不高
}

2.3 proxy代理(推荐)

proxy只使用于dev环境，上线之后无效的。
上线之后是需要用nginx、tomcat之类的代理进行转发进行，比如nginx是通过proxy-pass进行转发。