vue跨域问题自记

2024-04-08 18:11:04

为啥会跨域呢? 跨域是由于网站有同源策略.
什么是同源? 同源就是协议号,域名,子域名,端口号都相同,就可以说是同源的,只要这三个有不同的,就不是同源的.
为啥要有这个同源策略呢,不是很麻烦吗? 其实同源是浏览器核心的一个功能,如果没有同源,那么可以说网站就是非常的不安全的,随时可能被攻击.
非同源会导致什么呢
1. 无法读取非同源网站的Cookie、LocalStorage 和 IndexedDB
2. 无法接触非同源网站的dom
3. 无法向非同源网站发送AJAX请求
怎么才叫跨域呢?
1. 非同源,就是跨域
2. 跨域会报错:Access-Control-Allow-Origin
HTML特殊标签可以跨域: <link> <script> <img> <frame>
1. <img> 外部引入图片是完全没问题的
2. <script> 通过cdn来外部引入一些东西的时候就会跨域,但是没问题

常见解决方式

jsonp 利用<script>可以直接跨域的特性来完成

在页面引进jquery
发起ajax

 1 <script>
 2     $ajax({
 3         type: "get",
 4         url: "接口地址"
 5         datatype: "jsonp"//这里写成jsonp
 6         success: function (response) {
 7           console.log(response)
 8         }
 9     })
10 </script>

CORS 这个只要后台写 header ("Access-Control-Allow-Origin : *") 就代表允许所有的URL请求前端除非要用cookie
proxy 这个在vue里面用的最多,我喜欢
1. 通过中间件实现,浏览器有跨域限制但是服务器没有,设置一个代理服务器和浏览器同源,然后浏览器和这个代理服务器数据交换,这个服务器和真的服务器虽然跨域,但是服务器之间不会发生问题,问题就解决了
2. 需要在vue.config.js里面添加内容,这里不太懂,先放大哥的代码
3. ```
dev: {
    // 如果后端提供的接口为: /test/where
    
    assetsSubDirectory: 'static',
    assetsPublicPath: '/', 
    proxyTable: {
      '/proxyApi': {
        target: 'http://xxxx.com', // 后端提供给你的接口地址
        changeOrigin: true, // true开启跨域
        pathRewrite: {
          '^/proxyApi': '/proxyApi' // 代理api使用方法=> /proxyApi/test/where
        }
      }
    }
```
  好,就先写到这里

码农公寓

相关文章