zoukankan      html  css  js  c++  java
  • vue 本地和线上跨域的问题 个人解决方案

    产生跨域问题的原因

      跨域是因为浏览器的同源策略所导致的。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。浏览器引入同源策略主要是为了防止XSS,CSRF攻击。

    常见跨域问题的解决方式

    • 使用jsonp
    • 服务端代理
    • 服务端设置Request Header头中Access-Control-Allow-Origin为指定可获取数据的域名 

    本地开发模式

    如果是本地开发模式下 就没有必要再去麻烦后端去解决一下跨域问题。vue 本地开发提供了一个很好的解决跨域问题 请求转发

    如果是vue脚手架找到vue.config.js中配置,如果是自己搭的开发环境找到对应的配置文件(大部分应该都在config文件夹下的index.js)

      devServer: {
        proxy: {
          '/api': { //匹配api开头的走代理
            target: process.env.VUE_APP_BASE_API, // 接口地址
            changeOrigin: true,  //允许跨域
            pathRewrite: {
              '^/api': '' //重新路由,访问后端接口不一定是api 开头的这个时候就可以改变
            }
          }
        }
      },

    线上开发

    因为我们这边计划 前端统一打包分发多个地区,而不是各个地区分别去线上打包,提高版本发布效率,而且保证线上各个地区代码一致性.又因为各个地区接口地址也是独立的,所以接口地址不能写在配置文件中。

    所以在各个地区的nginx服务器做了代理转发。具体配置如下:

    server {
        listen 80;
        server_name 域名;
        root ####;
    
        location / {
          try_files $uri $uri/ /index.html;  //解决 HTML5 History 模式直接访问子路由404问题
        }
    
        location ^~/api/ {
    
          proxy_pass  域名或者ip地址:端口/; //匹配api开头的请求 端口后面加 / 请求的时候会把api去掉 不加 / 会带上完整的访问接口地址,这个可以和后端约定
    
        }
    
    }

    其他的跨域解决方案可以自行到网上搜搜 我这边只是把自己遇到的问题做个笔记

  • 相关阅读:
    JavaScript周报#185
    让你跟上nodejs的资源
    微信服务号开发笔记
    Algs4-2.1.15昂贵的交换
    Algs4-2.1.14出列排序
    Algs4-2.1.13纸牌排序-按花色排序
    Algs4-2.1.12令希尔排序打印出递增序列的每个元素所带来的比较次数和数组大小的比值
    Algs4-2.1.10在希尔排序中为什么实现h有序时不使用选择排序?
    Algs4-2.1.11希尔排序序列改为存数组
    Algs4-2.1.9给出希尔排序的轨迹
  • 原文地址:https://www.cnblogs.com/qcwblog/p/12802508.html
Copyright © 2011-2022 走看看