精华内容
下载资源
问答
  • vue 跨域问题

    千次阅读 2020-07-25 23:02:33
    前端请求经常会遇到跨域问题,那么 vue 中怎么解决这个问题呢?



    在这里插入图片描述

    1.1 开发环境

    config/index.js 修改 proxyTable,高版本 vue-cli 的项目在 根目录/vue.config.js 中修改 proxy

    1.1.1 proxyTable

    proxyTable: {
      // 可以有多个
      '/api': {
        target: 'http://47.103.4.205:6666/',  // 目标接口域名, 注意加 http
        changeOrigin: true,  // 是否跨域
        pathRewrite: {
          // 这里理解成用 '/api' 代替 target 里面的地址,后面组件中我们掉接口时直接用 api 代替 
          // 比如我要调用 'http://47.103.4.205:6665/user/add',直接写 '/api/user/add' 即可
          '^/api': '/'
        }
      },
    },
    

    1.1.2 使用

    // '/api' 不能忘,用它来匹配
    // http://localhost/api/user/add 本地项目地址就转换成 http://47.103.4.205:6666/user/add
    axios.get('/api/user/add').then(res => { 
    	console.log(res)
    })
    





    1.2 生产环境

      将 vue 项目打包发布后,发现之前的代理配置失效了,这是因为 vue proxy 只能在开发环境使用(很蛋疼~),我们可以使用 nginx 在完成跨域。nginx 怎么安装就不再说了,直接上配置。

    http {
        include       mime.types;
        default_type  application/octet-stream;
    
        sendfile        on;
    
        keepalive_timeout  65;
    
        server {
            listen       80;
            server_name  localhost;
    
    		# 这个是重点
    		location /api {
                rewrite ^.+api/?(.*)$ /$1 break;
    			proxy_pass http://47.103.4.205:6666/api;
            }
        }
    }
    
    展开全文
  • Vue 跨域问题解决

    千次阅读 2019-06-14 16:02:38
    【记】 Vue 跨域问题解决经过 跨域问题发生在生产环境 和 开发环境 开发环境 在config/index.js添加proxyTable代理接口 在开发的时候,需要请求同局域网内的接口,发现直接使用http://对方的ip地址/接口路径,会出现...

    Vue 跨域问题解决

    Vue3.0版本

    刚升级到3.0版本没有2.x版本webpack目录,查看文档之后发现原来已经移除了,
    要配置接口的代理得新建一个叫vue.config.js的配置文件

    如下代码片段

    module.exports = {
      devServer: { // 开发环境下runtime
        proxy: { // 代理服务器
    	  // 接口地址为 http://127.0.0.1:7001/api/register
          '/api/register': { 
            target: 'http://127.0.0.1:7001',
            secure: false, //是否使用 Https安全传输协议
            changeOrigin: true 
          }
        }
      }
    }
    
    

    Vue2.x 版本

    跨域问题发生在生产环境开发环境

    开发环境 使用proxyTable将接口代理到本地

    在开发的时候,需要请求同局域网内的接口,发现直接使用http://对方的ip地址/接口路径,会出现类似下图的跨域报错在这里插入图片描述

    打开config/index.js,在dev中找到proxyTable

    module.exports = {
     dev: {
    
       // Paths
       assetsSubDirectory: 'static',
       assetsPublicPath: '/',
       
       // 找到下面这个proxyTable 修改==============================================
       proxyTable: {
    	    // 下面是接口的路径,我的接口 地址是192.168.0.115:8088/login 
    		'/login': {
    			// 需要转发代理的域名
    			target: 'http://192.168.0.115:8088',	
    			// 如果是https接口,需要配置这个参数
    			secure: false,
    			 // 如果接口跨域,需要进行这个参数配置
    			changeOrigin: true,
    			// 这是一个通配符,设置完了之后每个接口都要在前面加上/api(特别注意这一点)
    			// pathRewrite: {
    			//	'^/api': ''
    			// }
    		}
    	},
       // 找到上面面这个proxyTable 修改==============================================
       host: 'localhost',
       port: 8080,
       autoOpenBrowser: false,
       errorOverlay: true,
       notifyOnErrors: true,
       poll: false, 
       showEslintErrorsInOverlay: false,
       devtool: 'cheap-module-eval-source-map',
       cacheBusting: true,
       cssSourceMap: true
     }
    

    config/index.js具体代码如下

    在这里插入图片描述
    调用方法:
    App.vue中使用
    在这里插入图片描述
    注意修改完config/index.js配置文件需要重启一下,npm run dev
    效果如下

    至此,开发环境接口调试的跨域问题暂时算解决?


    生产环境 利用Nginx做反向代理

    在使用npm dev run 打包项目之后,打开页面发送请求发现报错了。也对,因为接口本来就不在我机器上

    灾难现场
    在这里插入图片描述

    借助nginx进行反向代理,将接口代理到本地,先安装好 nginx安装教程
    打开nginx.conf, 找到server,并在里面追加

       server {
           listen       80;
           server_name  localhost;
           root    "E:/Program Files/PHPTutorial/WWW";
           location / {
               index  index.html index.htm index.php l.php;
              autoindex  off;
           }
    
           error_page   500 502 503 504  /50x.html;
           location = /50x.html {
               root   html;
           }
           location ~ \.php(.*)$  {
               fastcgi_pass   127.0.0.1:9000;
               fastcgi_index  index.php;
               fastcgi_split_path_info  ^((?U).+\.php)(/?.+)$;
               fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
               fastcgi_param  PATH_INFO  $fastcgi_path_info;
               fastcgi_param  PATH_TRANSLATED  $document_root$fastcgi_path_info;
               include        fastcgi_params;
           }
           
           #这里是追加的=====================================================
           location /login {
             proxy_set_header   Host             $host;
             proxy_set_header   x-forwarded-for  $remote_addr;
             proxy_set_header   X-Real-IP        $remote_addr;
             proxy_pass http://192.168.0.115:8088/login; #填写接口地址
    		}
           #这里是追加的=====================================================
       }
    
    

    在这里插入图片描述
    重启Nginx ,刷新页面

    在这里插入图片描述

    参考:

    展开全文
  • 主要介绍了springboot vue 跨域问题的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • SpringBoot 解决VUE跨域问题.pdf
  • Vue跨域问题

    千次阅读 2019-10-12 09:13:41
    随着项目前后端分离的趋势,跨域始终是一个绕不开的问题,一个本可以正常访问的接口,但在项目中请求就是发不出去,是什么原因导致的呢? 存在即合理,既然跨域那么烦人,那它存在的理由是什么呢?这里我们先了解...

    随着项目前后端分离的趋势,跨域始终是一个绕不开的问题,一个本可以正常访问的接口,但在项目中请求就是发不出去,是什么原因导致的呢?

    • 存在即合理,既然跨域那么烦人,那它存在的理由是什么呢?这里我们先了解一下浏览器的“同源策略”。

    同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

    • 浏览器的同源策略,别的先不管,我们只要知道它是一个安全机制就行了。详情请点击:浏览器的同源策略

    同源的定义

    如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的源。

    URL结果原因
    http://store.company.com/dir2/other.html成功
    https://store.company.com/secure.html成功
    https://store.company.com/secure.html失败不同协议 ( https和http )
    http://store.company.com:81/dir/etc.html失败不同端口 ( 81和80)
    http://news.company.com/dir/other.html失败不同域名 ( news和store )
    • 举个例子:vue项目通过8081访问,后端项目通过8082访问,因为端口不同,所以前端请求后端时就会出现跨域问题。

    • 了解了同源策略后,我们不禁要问,浏览器为何要这么做呢?出于什么安全考虑的呢?

    想象一下,你通过浏览器登录并信任了淘宝,淘宝将你的信息保存在cookie里,下次你再访问淘宝时,就无需再次登录,因为淘宝已经通过cookie认识你了。这时候,如果你访问了其他危险的网站,如果没有同源策略,该网站可以通过cookie以你的名义去操作你的淘宝,会导致安全隐患。这就是著名的CSRF攻击。

    • 看到这里,是不是觉得跨域就没那么讨厌了呢?毕竟浏览器也是为了保护我们的安全。

    • 安全归安全,在保证安全的前提下,项目出现问题还是要解决的。下面说一下我的解决办法。


    • 安装axios

    npm install axios --save

    • 不着急引入,我们先配置一下,修改项目目录下config文件夹里的三个js文件

    • dev.env.js

    'use strict'
    const merge = require('webpack-merge')
    const prodEnv = require('./prod.env')
    
    module.exports = merge(prodEnv, {
      NODE_ENV: '"development"',
      API_HOST: '"/api/"' // 开发环境接口前缀
    })
    
    • prod.env.js
    'use strict'
    module.exports = {
      NODE_ENV: '"production"',
      API_HOST: '"/one/"' // 生产环境接口前缀
    }
    
    
    • index.js在dev对象下新增proxyTable
    proxyTable: {
          '/api': {
            target: 'http://localhost:8088/one',// 接口的域名
            changeOrigin: true,// 如果接口跨域,需要进行这个参数配置
            pathRewrite:{
              '^/api':''
            }
          }
        },
    
    

    能力有限,我说一下我自己的理解:首先dev.env.js是在开发环境时加载使用的,prod.env.js是在生产环境时使用的。开发环境时,在index.js中配置proxyTable,vue会帮我们把 “/api/*”下的所有请求转发到‘localhost:8088/one”下,这是开发环境。 ’

    开发环境时,vue可以帮我们做代理,解决跨域问题,但是生产环境呢?
    我们知道,生产环境时,我们是直接将vue项目打包成一个静态文件的,也就无来代理一说,所以这里我用的nginx来帮我们代理转发请求。
    这也就是为什么我的开发和生产的js配置的请求前缀不一样的原因了。

    • 配置好后,我们在main.js中引入axios并做简单配置
    import axios from 'axios'
    //设置请求前缀(根据开发和生产环境自动切换,无需另外配置)
    axios.defaults.baseURL = process.env.API_HOST
    Vue.prototype.axios = axios
    Vue.config.productionTip = false
    
    • 引入后,请求时,url只需输入接口后缀,axios会自动帮我们把配好的前缀给带上
    this.axios.get('shortVideo/grabIds').then(response=>{
        //具体实现代码
    });
    
    

    项目只需配置一次即可,还是挺简单的。鄙人浅见,理解错误的地方,望指正,感激不尽。

    展开全文
  • vue跨域问题

    2020-12-23 23:10:53
    现在要复制一套英文版出来,vue和tp5后端复制完改完文字,包括vue的请求地址,打包vue之后报错提示跨域,中文的没有问题, 然后我又重新本地把中文的vue项目改成英文的接口地址后再重新打包上传,可以请求英文的...
  • 解决Vue项目开发过程中的跨域问题 问题分析: 在开发过程中我们远程访问发起http请求时可能会遇到跨域问题,虽然服务器能够开了防跨域,但是vue的项目还是请求不到数据,遇到跨域问题,如图。 解决方法 新建...

    解决Vue项目开发过程中的跨域问题

    问题分析:

    在开发过程中我们远程访问发起http请求时可能会遇到跨域问题,虽然服务器能够开了防跨域,但是vue的项目还是请求不到数据,遇到跨域的问题,如图。
    在这里插入图片描述

    解决方法

    • 新建config配置文件
      在vue cli2之前使用脚手架搭建的项目,自带了一个config的配置文件,但是在vue-cli3之后,就没有这个配置文件了。所以想要配置,就必须在根文件夹下新建一个名字为 vue.config.js 的文件。(注意:名字必须一样
    • 配置相关值
      首先在配置文件 vue.config.js 中配置端口号:8080,这个可以自定义。然后本地的配置localhost,然后配置服务器的访问地址,和允许跨域等参数。
      module.exports = {
        lintOnSave:false,
        devServer: {
          host: 'localhost',
          port: '8080',
          https:false,
          hotOnly:false,
          proxy: {
            "server": {
              target: 'http://api.myxy99.cn/',
              ws: true,
              changeOrigin: true,
              pathRewrite: {
                '^/server': ''
              }
            }
          }
        }
      }
      
    • 下载插件
      因为在之前开发项目。一直使用的是一些防跨域的插件,所以这次也为大家推荐这个插件。这个插件是chrome商场自带的插件,所以直接下载就可以使用了,下载链接: Allow CORS。直接下载下来不用解压,直接拖到chrome的拓展程序中就可以了。
      在这里插入图片描述
      然后在使用的时候直接点亮它就好了。
      在这里插入图片描述
    展开全文
  • 主要介绍了django rest jwt vue 跨域问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue跨域问题,修改代理后仍出现404

    千次阅读 2019-04-26 11:04:56
    vue跨域问题,修改代理后仍出现404 首先确认安装了axios,安装方法:cnpm install axios -S或者不用镜像npm install axios dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { ...
  • 主要介绍了Django+vue跨域问题解决的详细步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 前端跨域,本地跨域vue项目跨域问题 疑问1: 前端开发中解决浏览器的跨域问题 (推荐阅读) 什么是跨域? 为什么要跨域? 解决“跨域”的五种常见方式: 1. JSONP 2. CORS跨域资源共享 3. http proxy代理跨域...
  • vue 跨域问题解决方案

    万次阅读 多人点赞 2018-10-11 11:36:18
    Vue-cli脚手架搭建了个demo,前后分离就有跨域问题出现vue-clie搭建demo步骤(传送门):https://www.cnblogs.com/wangenbo/p/8487764.html 我自己在网上找了2个接口做测试: CSDN:...
  • SpringBoot+VUE跨域问题

    万次阅读 2019-03-19 14:57:06
    后端在登录接口保存当前用户信息到session,前端请求后端接口,后端拦截器无法从session中获取当前登录的用户,前端出现以下跨域报错 错误信息: The value of the 'Access-Control-Allow-Origin' header in the...
  • 解决vue跨域问题

    千次阅读 2019-09-26 11:50:58
    使用proxyTable设置接口代理(项目使用vue-cli脚手架搭建) 在config/index.js下设置 proxyTable: { '/api':{ //匹配所有以'api'开头的请求路径 target:'http://localhost:8081', //代理目标的基础路径 ...
  • 主要介绍了Vue跨域请求问题解决方案过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 问题产生情况描述:今天使用VUE 调用SpringBoot 后台服务接口,提示跨域,错误截图如下: 我参考网上解决Vue + SpringBoot 跨域代码,源码如下: package com.zzg.configuration; import org.springframework....
  • vue跨域问题解决方法

    千次阅读 2018-05-18 17:52:35
    vue跨域解决方法 vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No ‘Access-Control-Allow-Origin’ header is present on the requested resource.” ...
  • VUE打包发布
  • Nginx反向代理解决Vue跨域问题

    千次阅读 2020-04-04 15:22:34
    项目前后端分离,前端项目使用vue框架书写,在请求后端接口时,由于服务运行在不同的服务器,就会出现跨域问题。 示例: 前端项目的项目地址为:192.168.1.2:8082 后端项目的项目地址为:192.168.1.3:8083 ...
  • 这几天在学习vue,到了其中的网络请求部分,由于是前后端分离结构,所以自然就出现跨域问题。 关于网络请求部分的配置也记录一下: 首先安装axios cnpm install axios -S 安装后导入到main.js中,进行全局...
  • vue 跨域

    2018-04-18 17:47:01
    vue跨域参考链接 1、打开config/index.js,在proxyTable中添写如下代码: proxyTable: { '/api': { //使用"/api"来代替"http://f.apiplus.c" target: 'http://f.apiplus.cn', //源地址 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 39,531
精华内容 15,812
关键字:

vue跨域的问题是怎么出现的

vue 订阅