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

    2021-12-09 14:31:43
    解决跨域问题 在vue项目的根目录中添加vue.config.js // webpack-dev-server 相关配置 devServer: { // 设置代理 host: 'localhost', // port: 8080, //自定义端口 https: false, //false关闭https,true为...

    解决跨域问题

    1. 在vue项目的根目录中添加vue.config.js
    // webpack-dev-server 相关配置
        devServer: { // 设置代理
            host: 'localhost', //
            port: 8080, //自定义端口
            https: false, //false关闭https,true为开启
            open: true, //自动打开浏览器
            proxy: {
            	//只要请求路径中找到带有/api的,也可以写其他的,将会代理 
                '/api': { 
                    target: 'http:xxxxxxxxx', //要跨越到达的目标地址
                    ws: false, // 如果要代理 websockets
                    changeOrigin: true, //开启跨域
                    pathRewrite: {   //重写路径,这种是没有我们定义的前缀
                        '^/api': '/api'  // 这种接口配置出来 axios.get("api/login")=>自带target地址 + /api/login  = http:xxxxxxxxx/api/login
                        //'^/api': '/' 	//这种接口配置出来 axios.get("api/login")=> 将/api省略掉了   http:xxxxxxxxx/login  
                    }
                }
            }
        },
    

    proxy在服务器中会失效 就是说上传到服务器中代理失效, 在封装axios时,设置好默认baseURL

    >//默认baseURL
    if(process.env.NODE_ENV == 'development'){
        axios.defaults.baseURL="http://localhost:8080"  //开发环境就写本地
    }else if(process.env.NODE_ENV == 'production'){
        axios.defaults.baseURL="http://xxxxxxxxxxxxxxxx"  //生产环境就写线上地址
    }
    
    展开全文
  • Vue如何设置跨域

    2021-02-24 14:39:12
    1、开发环境下,如何做好跨域配置 首先跨域我们要配置的文件有:config下的index.js dev: { proxyTable: { '/api': { target: 'http://10.1.5.11:8080/',//设置你调用的接口域名和端口号 changeOrigin...

    1、开发环境下,如何做好跨域配置

    首先跨域我们要配置的文件有:config下的index.js
    
        dev: { 
    
            proxyTable: { 
    
                '/api': { 
    
                        target: 'http://10.1.5.11:8080/',//设置你调用的接口域名和端口号 
    
                        changeOrigin: true, //跨域 
    
                        pathRewrite: { 
    
                                   '^/api': '/' //这里理解成用‘/api’代替target里面的地址,
    
                                    后面组件中我们掉接口时直接用api代替 
    
                                    比如我要调用'http://10.1.5.11:8080/xxx/duty?time=2017-07-07 14:57:22',
    
                                    直接写‘/api/xxx/duty?time=2017-07-07 14:57:22’即可 
    
                                    在开发环境显示地址:http://localhost:9600//api/xxx/duty?time=2017-07-07 14:57:22
    
                                        } }
    

    config/dev.env.js:

    module.exports = merge(prodEnv, {

                                    NODE_ENV: '"development"',//开发环境 
    
                                    API_HOST:"/api/"
    
                                    })
    

    跨域成功,但是这只是开发环境(dev)中解决了跨域问题,生产环境中真正部署到服务器上如果是非同源还是存在跨域问题,

    如我们部署的服务器端口是3001,需要前后端联调,第一步前端我们可以分生产production和开发development两种环境分别测试,

    在config/dev.env.js和prod.env.js里也就是开发/生产环境下分别配置一下请求的地址API_HOST,开发环境中我们用上面配置的代理地址api,

    生产环境下用正常的接口地址,所以这样配置,分别在config/dev.env.js和prod.env.js两个文件中进行以下配置。

    生产环境配置:prod.env.js

    module.exports = { 
    
                    NODE_ENV: '"production"',//生产环境 
    
                    API_HOST:'"http://10.1.5.11:8080/"'
    
                    }
    

    当然不管是开发还是生产环境都可以直接请求http://10.1.5.11:8080//。配置好之后测试时程序会自动判断当前是开发还是生产环境,然后自动匹配API_HOST,

    我们在任何组件里都能用process.env.API_HOST来使用地址如:

    instance.post(process.env.API_HOST+‘user/login’, this.form)
    1
    然后第二步后端服务器配置一下cros跨域即可,就是access-control-allow-origin:*允许所有访问的意思。

    综上:开发的环境下我们前端可以自己配置个proxy代理就能跨域了,真正的生产环境下还需要后端的配合的。

    某大神说:此方法ie9及以下不好使,如果需要兼容,最好的办法是后端在服务器端口加个代理,效果类似开发时webpack的代理。

    axios发送get post请求问题
    发送post请求时一般都要设置Content-Type,发送内容的类型,application/json指发送json对象但是要提前JSON.stringify()一下。application/xxxx-form指发送?
    a=b&c=d格式,可以用qs.stringify()的方法格式化一下,qs在安装axios后会自动安装,只需要组件里import一下即可。
    const postData=JSON.stringify(this.formCustomer);
    ‘Content-Type’:‘application/json’}

    const postData=Qs.stringify(this.formCustomer);//过滤成?&=格式

    ‘Content-Type’:‘application/xxxx-form’}

    展开全文
  • 一.什么是跨域 跨域问题的出现是因为浏览器的同源策略问题,所谓同源:就是两个页面具有相同...如何解决跨域问题 1.使用jsonp实现: 网页通过script标签向服务器请求json数据,服务器受到请求后,将数据放在一个指定名字

    一.什么是跨域

    跨域问题的出现是因为浏览器的同源策略问题,所谓同源:就是两个页面具有相同的协议(protocol),主机(host)和端口号(port),它是浏览器最核心也是最基本的功能,如果没有同源策略我们的浏览器将会十分的不安全,随时都可能受到攻击。

    当我们请求一个接口的时候,出现如:Access-Control-Allow-Origin 字眼的时候说明请求跨域了

    img

    二.如何解决跨域问题

    1.使用jsonp实现:

    网页通过script标签向服务器请求json数据,服务器受到请求后,将数据放在一个指定名字的回调函数的参数里面传给前端。

    <script src="http://www.test.com/getData?callback=getData"></script>
    // 向服务器test.com发出请求,该请求的查询字符串有一个callback参数,用来指定回调函数的名字
    
    // 处理服务器返回回调函数的数据
    <script type="text/javascript">
        // 服务器返回的数据会放到回调函数里面
        function getData(res){
            // 处理获得的数据
            console.log(res.data)
        }
    </script>
    

    2.使用Jquery ajax实现,

    $.ajax({
      url: 'http://www.test.com:8888/getData',
      type: 'get',
      dataType: 'jsonp',  // 请求方式为jsonp
      jsonpCallback: "handleCallback",    // 自定义回调函数名
      data: {}
    })
    

    三.在vue开发中实现跨域

    在vue项目根目录下找到vue.config.js文件(如果没有该文件则自己创建),在proxy中设置跨域

     devServer: {
     	host: "0.0.0.0",//即本地
        port: 8080, // 端口号
        https: false, // https:{type:Boolean}
        open: false, //配置自动启动浏览器
        //【配置跨域】
        proxy: {  
          '/api': {
          //这里后台的地址模拟的;应该填写你们真实的后台接口
            target: 'http://121.121.67.254:8185/',  
            changOrigin: true,  //允许跨域
            /* 重写路径:目的如下
            把源访问地址:
            http://localhost:8080/api/core/getData/userInfo
            改成如下实际访问地址:
            http://121.121.67.254:8185/core/getData/userInfo,
            即把路径以/api开头的,去除,变core/getData/userInfo
            */
            pathRewrite: {'^/api': ''}
          },
        }
      },
    

    重写路径:目的如下
    把源访问地址:
    http://localhost:8080/api/core/getData/userInfo
    改成如下实际访问地址:
    http://121.121.67.254:8185/core/getData/userInfo,
    即把路径以/api开头的,去除,变core/getData/userInfo

    【注意】:如果后端提供的地址就是包含api路径:

        http://121.121.67.254:8185/api/core/getData/userInfo
        则注释掉此项
       // pathRewrite: {  '^/api': '' }
    

    1.在vue中使用proxy进行跨域的原理是:

    将域名发送给本地的服务器(启动vue项目的服务,loclahost:8080),再由本地的服务器去请求真正的服务器。

    2.以下是我在开发vue项目中实现跨域的步骤:

    1.在proxy中设置要访问的地址,并重写/api为空的字符串,因为我们真正请求的地址是没有带/api,这个重写很重要!!!

    img

    2.在创建axios实例的时候将baseURL设置为/api ,这时候我们的跨域就已经完成了。

    img

    3. 假如请求的真正地址为:http://121.121.67.254:8185/core/getdata/userInfo,但我们在浏览器上会看到是这样的: http://localhost:8080/api/core/getData/userInfo ,多了个/api,但并不影响我们请求数据。

    img

    展开全文
  • 1、config/index.js:proxyTable加代理 proxyTable: { '/model_manager/*': { ... changeOrigin: true, //是否跨域 ws: true, pathRewrite: { '^/model_manager': '/model_manager' //路径重写

    1、config/index.js:proxyTable加代理

    proxyTable: {
          '/model_manager/*': { 
            target: 'http://localhost:8085', //源地址 
            changeOrigin: true, //是否跨域
            ws: true,
            pathRewrite: { 
              '^/model_manager': '/model_manager' //路径重写 
              } 
          } 
        },
    

    在这里插入图片描述

    2、service/index.js: baseURL="/model_manager"

    let baseURL = "/model_manager"
    
    展开全文
  • 使用Vue解决跨域问题

    2021-11-03 09:15:37
    如果你是一个Web前端工程师,那么跨域这个问题肯定是绕不开的!???????????? 1. 创建 vue.config.js 设置 devServer 属性 module.exports = { devServer: { //webpack-dev-server配置 host : 'localhost', ...
  • vue2 跨域问题解决

    2021-07-21 09:52:31
    如果没有config /index.js文件目录,在根目录下建一个vue.config.js 文件 ,有哪个目录就在那个目录下: // vue.config.js 配置说明 //官方vue.config.js 参考文档 ...
  • vue laravel跨域解决

    2021-12-11 10:55:59
    真的是一个字:日了X了,搞了一天,尝试了各种办法,都无法解决,诡异的是两个vue项目接同一个Lravel后台,一个跨域,一个正常。最后终于在这大哥的文章里解决了。 传送门...
  • Vue3 跨域问题解决方案

    千次阅读 2021-04-20 19:30:03
    1、配置跨域 配置文件中:vue.config.js(vue2为config下面的配置文件) 切记在修改配置文件后需要重新启动项目,在热部署是无法修改配置的 module.exports={ devServer:{ proxy:{ '/api':{ target: '...
  • 跨域一直是一个在开发中很让人头疼的问题,解决跨域的方式有很多,后端和前端都有自己的解决方式,后端的话主要是在响应头里面添加信息,而前端主要是以代理的方式去进行解决,说白了就是将我们发送的请求交给跟我们...
  • vue解决跨域问题

    2020-12-20 21:15:40
    vue解决跨域问题vue跨域解决方法和小总结vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' header is present on the ...
  • VUE跨域解决方案以下五种情况会引起跨域问题 以下五种情况会引起跨域问题 - 域名不同 - 子域名不同 - 端口不同 - 协议不同 - 域名和ip地址 跨域不一定会产生跨域问题? 特殊情况:script和img 跨域的解决方案有...
  • 这样就导致了跨域问题,解决方法林林总总,特开一遍文章来持续记录。 前端跨域 vue.config.js 找到项目的根目录下的 vue.config.js 文件(没有就新建),然后在里面输入以下代码: //在根目录下创建vue.config.js,...
  • 导言:是否有很多前端小伙伴都被跨域这个问题搞得晕头转向,我也是,下面给大家献上3种解决方法(关闭浏览器,vue代理域名,uniapp代理域名) 一、关闭谷歌浏览器跨域(简单粗暴) 在桌面找到谷歌浏览器图标---->...
  • 解决vue跨域问题

    2021-09-20 03:14:26
    解决vue跨域问题: 1.创建一个新的文件命名为vue.config.js 2.编写解决跨域问题代码,配置跨域 module.exports = { devServer: { proxy: { //配置跨域 '/api': { target: 'http://localhost:8081/', //这里后台的...
  • vue前端做跨域设置

    千次阅读 2020-12-21 23:45:26
    跨域截图最近一些朋友问我,vue的前端能不能做跨域?之前每次前端和后台调接口的时候都很麻烦。要什么后台做跨域支持什么?有的后台技术差点的还不会做这个,还有脾气不好的还不给你搞。还有时候还在开发阶段的时候...
  • 一、什么是跨域问题 ...跨域问题前后端都可以解决,这里仅提供vue的前端跨域解决方案: 前端vue.config.js配置如下,然后保证在你访问后端接口时加个前缀/api。 devServer: { port: port, open: false, ov
  • vue2.6.11 版本解决跨域

    2021-02-02 18:49:59
    在开发时候 新建 vue.config.js文件,位置如下: 内容如下: module.exports = { devServer: { open: true, host: 'localhost', port: 8080, https: false, //以上的ip和端口是我们本机的;下面为需要跨域的 ...
  • 之后在网上查vue 跨域问题。大部分都是说 在Config/index.js 里面进行配置proxyTable: {}初始的proxyTable: {}是个空的,改成proxyTable: {'/api': { //使用"/api"来代替"http://f.apiplus.c"target: 'http...
  • Vue项目 跨域 解决方案与 vue.config.js 配置解析

    千次阅读 多人点赞 2021-12-07 19:17:16
    为什么会出现跨域? 出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源...
  • }) //通过这中方法去解决跨域,打包部署时还按这种方法会出问题。解决方法如下: let serverUrl = '/api/' //本地调试时 // let serverUrl = 'http://f.apiplus.cn/' //打包部署上线时 export default { dataUrl: ...
  • VUE本地跨域解决方案

    2020-12-30 14:37:57
    我们前端使用接口时,时常遇到跨域问题,一般都是后台设置开放访问权限解决跨域,如果后台不配合或者为了安全问题而不能开放权限,那么我们前端只能自己解决跨域问题了!!!直接再问vue中使用nodeJS进行代理就可以...
  • Vue解决跨域问题

    2021-03-26 17:59:37
    Vue解决跨域问题   跨域问题在前端可以说是很常见的,在解决这个问题之前,我们可以先了解为什么需要跨域。以下内容参考自MDN,链接:浏览器的同源策略。目前因为我只试过Vue解决跨域,所以只会Vue解决方法,还有...
  • 前后端分离解决跨域问题几种处理方案
  • vue 配置proxy 解决跨域

    千次阅读 2021-03-29 14:13:55
    前言:现在开发大多是前后端分离,在调接口调时候,必然会出现跨域的问题,可以后台配置解决,也可以前端配置。vue 最常用的就是配置proxy 来解决。具体如下: 1)首先在最外层新建vue.config.js 。在里面配置。...
  • vue——前端跨域

    2021-01-30 13:18:56
    ***针对的是不同域名、不同协议的跨域:1、找到config文件中开发环境的配置文件——dev.env.js,在里面将要跨域的域名配置进去2、找到config文件中线上环境的配置文件——prod.env.js,在里面将要跨域的域名配置进3、...
  • vue2.5 跨域代理设置

    2021-08-16 23:45:15
    使用vuecli搭建的前端项目,版本 "vue": "^2.5.2" http://localhost:8080 -> http://localhost:8090/baas/… 报错 2.解决办法 修改index.js,添加proxyTable 修改dev.env.js,添加API_HOST 修改prod.env.js,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 44,148
精华内容 17,659
关键字:

vue设置跨域解决

vue 订阅