精华内容
下载资源
问答
  • 在用vue做前端开发的时候,因为一般跑vue使用的webpack自带的node服务,而我们实际要使用的数据确是后台服务器上的,所以这就涉及到服务器请求跨域问题。本来在诸如axios之类的网络请求参数里面配置 ...
  • 在一般情况下,后端都会设置请求跨域允许的来源、方法等。 但是也保不准后端疏忽而忘记这个问题。 那为了不影响我们的开发,前端只能被动的去找后端解决跨域问题。 其实,我们前端也可以解决跨域问题,那就是使用...
  • 跨域资源共享CORS(Cross-origin Resource Sharing),是W3C的一个标准,允许浏览器向跨源的服务器发起XMLHttpRequest请求,克服ajax请求只能同源使用的限制。关于CORS的详细解读,可参考阮一峰大神的博客:跨域资源...
  • 服务器告诉浏览器:你允许我跨域 具体如何告诉浏览器,请看: // 告诉浏览器,只允许 http://bb.aaa.com:9000 这个源请求服务器 $response->header('Access-Control-Allow-Origin', 'http://bb.aaa.com:9000'); //...
  • 主要介绍了详解springboot和vue前后端分离开发跨域登陆问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 发现一个很奇怪的问题,每次前端发起请求的时候,通过浏览器的开发者工具都能看到在Network下同一个url有两条请求,第一条请求的Method为OPTIONS,第二条请求的Method才是真正的Get或者Post,并且,第一条请求无数据...
  • 文章目录开发环境中跨域名词解释1、同源策略:2、同源:3、跨域:4、代理服务器:解决方式项目背景跨域配置1、配置说明:A、参数proxy详解:B、pathRewrite详解:实例: 开发环境中跨域 名词解释 1、同源策略: 同源...

    开发环境中跨域

    名词解释

    1、同源策略:

    同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。

    2、同源:

    所谓同源,就是指协议、域名、端口号,三者都一样就是同源,只要有一个不同就是跨域。

    3、跨域:

    又非同源策略请求。在浏览器里面域名、端口、IP地址、协议,有任何一项不同,就是跨域。
    如:看下面的链接是否与 http://www.test.com/index.html 同源?
    http://www.test.com/dir/login.html 同源
    https://www.test.com/index.html 不同源 协议不同(https)
    http://www.test.com:8090/index.html 不同源 端口不同(8090)
    http://www.dyna.com/index.html 不同源 域名不同(dyna)

    4、代理服务器:

    前端需要发送请求的url为“http://localhost:8080/teach/xxx/xxx”,请求的目标服务器为“http://localhost:8012/teach/xxx/xxx”,前端发送请求,直接请求目标服务器是请求不通的(因为端口不同),所以需要一个中介来处理。前端发送请求,先向本地虚拟服务器发送请求(中介),再由本地虚拟服务器(中介)向目标服务器发送请求,目标服务器返回数据给本地虚拟服务器(中介),本地虚拟服务器(中介)再把接收到的返回数据返给前端发送的请求。这个本地虚拟服务器(中介)就是所谓的代理服务器。

    解决方式

    JsonP(只能处理get请求)、cors(后端开启)、代理服务器.

    项目背景

    使用Vue-cli创建的项目,开发地址是localhost:8080,需要访问本机上的后台服务器localhost:8012,相同域名不同端口之间的访问,需要跨域才能正确请求后端接口。跨域的方法有很多,通常都需要后台配置。在开发过程中,由于后台还没有进行跨域的配置,所以前端想要正确请求到后端接口,就需要暂时由前端开发人员解决跨域问题。

    跨域配置

    项目开发是使用vue-cli脚手架创建的项目,可以直接利用Node.js代理服务器,通过修改vue.config.js配置文件中devServer配置项中的proxy实现跨域请求。
    在这里插入图片描述

    1、配置说明:

    devServer:{
    host:'localhost'//本地域名
    port:8081,//本地端口号
    proxy:{
    '/api':{     // "/api"---拦截以“/api”开头的接口地址
    target:"http://localhost:3000",//要跨域的域名
    changeOrigin:true//是否开启跨域
    pathRewrite:{  //本身的接口地址没有‘/api’,这种通用前缀,所以要rewrite,如果本身有则去掉                 '^/api':' '    //使用'^/api':' '   可以把接口中的虚拟/api去掉。                                   这项
    //本身接口中没有/api,使用/api和'^/api':' '的作用:既能拥有正确的跨域标识,又能在请求接口的时候去掉/api。
    }
    }
    }
    }
    
    A、参数proxy详解:

    vue-cli的config配置文件中的参数:proxy 这个参数主要是一个地址映射表,可以通过设置将复杂的url简化,例如我们要请求的地址是“http://localhost:8080/teach/queryCourseInfoByName”,可以按照如下设置:

    proxy: {
     '/teach': {
       target: 'http://localhost:8080',
       //pathRewrite: {
    //由于接口中本来就有“/teach”,所以这里不需要配置pathRewtite这项了
       //}
     }
    }
    

    这样我们在写url请求的时候,只用写成/teach/queryCourseInfoByName就可以代表“http://localhost:8080/teach/queryCourseInfoByName”了。
    那这又是如何解决跨域问题的呢?其实在上面的“/teach”的参数里面有一个changeOrigin参数,接收一个布尔值,如果设置为true,那么本地就会虚拟一个服务端接收我们发送的请求并代替转发该请求,这样就不会有跨域问题了,这只适用于开发环境。

    B、pathRewrite详解:

    用代理,首先得有一个标识,告诉他我们的这个连接要用代理,不然的话,可能我们的 html,css,js这些静态资源都跑去代理。所以我们只要接口用代理,静态文件用本地。’/api’: {}, 就是告诉node,我接口只要是’/api’开头的才用代理。所以我的接口就要这么写 /api/teach/xx/xx。最后代理的路径就是 http://localhost:8080/xx/xx。可是不对啊,我正确的接口路径里面没有/api,所以此时就需要使用pathRewrite,用’^/api’:’’, 把’/api’去掉,这样既能有正确标识,又能在请求接口的时候去掉api。当然如果本身的接口中就有/api,那么就可以把pathRewrite这个参数去掉。

    【注意】
    接口地址原本是/teach/queryCourseInfoByName,但为了匹配代理地址,在前面加了一个/api,因此接口地址写成这样才能生效:/api/teach/queryCourseInfoByName。
    “/api” 为匹配项,target为被请求的地址,因为在axios的url中增加了前缀“/api”,而原本的接口是没有这个前缀的,所以需要通过pathRewrite来重写地址,将前缀“/api”转为“/”。如果本身的接口地址就有“/api”,就可以把pathRewrite删掉。
    在开发过程中,我加上“/api”的初衷是:后端使用微服务,要实现跨域,部署在服务器后前端接口会发生微小调整,需要加上对应微服务的服务名。开发过程中,后端还没有解决跨域问题,前端为了能成功调用接口,为了方便后期的接口地址调整,所以加上了前缀/api,做统一管理。

    2、实例:

    请求后端接口:/teach/queryCourseInfoByName
    跨域请求接口:/api/teach/queryCourseInfoByName
    在这里插入图片描述
    先请求本地接口在这里插入图片描述,然后由代理再向 在这里插入图片描述 发起请求。在浏览器中可以看到请求的url为:http://localhost:8080/teach/queryCourseInfoByName,而实际请求的url为:http://localhost:8012/teach/queryCourseInfoByName,中间的端口转发已由代理完成。

    展开全文
  • 跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。所谓同源是指,域名,协议,端口均相同。 http://www.123.com/index.html 调用 ...

    概念:

    什么是跨域?

    跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。所谓同源是指,域名,协议,端口均相同。
    http://www.123.com/index.html 调用 http://www.123.com/server.php (非跨域)
    http://www.123.com/index.html 调用 http://www.456.com/server.php (主域名不同:123/456,跨域)
    http://abc.123.com/index.html 调用 http://def.123.com/server.php (子域名不同:abc/def,跨域)
    http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php (端口不同:8080/8081,跨域)
    http://www.123.com/index.html 调用 https://www.123.com/server.php (协议不同:http/https,跨域)
    请注意:localhost和127.0.0.1虽然都指向本机,但也属于跨域。
    浏览器执行javascript脚本时,会检查这个脚本属于哪个页面,如果不是同源页面,就不会被执行。

    解决方案:

    方法一:使用jsonp

    前端代码:

        $.ajax({
            url : 'XXXXXXX',
            type : 'get',
            dataType : 'jsonp',
            jsonp : 'jsonpCallback', //成功回调,如果不设置,默认返回callback,后端需要返回此方法,比如Java写法如下
            success : function (data) {
                console.log(data);
            },
            error : function (error) {
                console.log(error);
            }
        })


    后端代码(以Java为例):

            public string ProcessCallback(string name, string email)
        {
            if (Request.QueryString != null)
            {
                string jsonpCallback = Request.QueryString["jsonpcallback"];
                var user = new User
                {
                    Name = name,
                    Email = email
                };
                // jsonpCallback 对应前端的jsonp: 'jsonpCallback'中的jsonpCallback,如果没设置,默认callback
                return jsonpCallback + "(" + new JavaScriptSerializer().Serialize(user) + ")";
            }
    
            return "error";
        }

    方法二:利用CORS(跨域资源共享)

    前端代码:

    服务器代码:

    服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许Ajax进行跨域的访问。

    使用该方式的特点:

    与前jsonp方式相比,前端代码和未处理跨域前一样,即普通的ajax请求,但服务器代码添加了一段解决跨域的代码

    PS:

    cors高级使用:

    在springmvc中配置拦截器,创建跨域拦截器实现HandlerInterceptor接口,并实现其方法,在请求处理前设置头信息,并放行


    在springmvc的配置文件中配置拦截器,注意拦截的是所有的文件


    例子:

    vue项目跨域举例:

    首先需要配置config下的index.js中的proxyTable,配置如下:

      dev: {
    
        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: './',
        proxyTable: {
          '/api': {
            target: 'http://happymmall.com',// 请换成你需要跨域请求的地址
            changeOrigin: true,
            pathRewrite: {
              '^/api': ''
            }
          }
        },
    解释: proxyTable中的pathRewrite的/api理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用

    'http://hayypmmall.com/product/list.do?keyword=手机'这个接口,则换成'/api/procuct/list.do?keyword=手机'即可。


    以下为发送该请求时,axios的代码:代码中baseURL为'/api',url为'product/list.do?keyword=手机',合起来就是'/api/procuct/list.do?keyword=手机',

    由于我们在config中的index.js设置了代理,则请求地址实际为'http://hayypmmall.com/product/list.do?keyword=手机'

    axios({
            method: 'get',
            baseURL: '/api',
            url: 'product/list.do?keyword=手机'
          }).then(
            res => {
              console.log(res.data.data.list[0].name);
            }
          ).catch(
            err => {
              console.log(err);
            }
          );
    运行结果为:



    此时网络请求中也可看到成功的请求:



    然而这只是解决了开发环境下的跨域,npm run build出来后的dist代码,放到服务器中运行,还是会存在跨域问题,比如网上的这位伙伴,问题如下,相信大家也是遇到这个问题(开发环境下的跨域解决了,但是生产环境中的跨域还是没有解决)。

    以下为图片:


    以上为图片


    许多有经验的伙伴在问题下纷纷贡献上解决办法,其中一位800多声望值的伙伴回答如下:

    以下为图片:


    以上为图片。

    也就是问题又重新回归到了上边介绍的跨域方法二:利用CORS



    如果上线时前后端部署到同源下的话,这时只需要解决开发时的跨域,部署上线后,由于是同源,不存在跨域问题;这种情况下,本人使用的是mac下的charles,一款代理软件,轻松解决开发环境下的跨域问题;Windows下相同功能的有Fiddler。


    展开全文
  • 开发静态页面时,类似Vue的应用,我们常会调用一些接口,这些接口极可能是跨域,然后浏览器就会报cross-origin问题不给调。 最简单的解决方法,就是把浏览器设为忽略安全问题,设置–disable-web-security。不过...
  • vue-cli配置反向代理 vue-cli提供了配置反向代理的接口,即设置config/index.js中的proxyTable。配置如下: 组件中调用接口示例(axios) 上述示例请求的地址会被解析为http://moby.xbotech.com/api/login。...

    vue-cli配置反向代理

    vue-cli提供了配置反向代理的接口,即设置config/index.js中的proxyTable。配置如下:

    组件中调用接口示例(axios)

    上述示例请求的地址会被解析为http://moby.xbotech.com/api/login。如果proxyTablepathRewrite配置为空,则请求的地址被解析为http://moby.xbotech.com/login

    以上配置只是在开发环境(dev)中解决跨域。要解决生产环境的跨域问题,则在config/dev.env.jsconfig/prod.env.js里也就是开发/生产环境下分别配置一下请求的地址API_HOST,开发环境中我们用上面配置的代理地址api,生产环境下用正常的接口地址。配置代码如下: 

    对反向代理解决跨域过程的理解

     

    如图,浏览器中请求的urlhttp://localhost:8081/api/portal/order/queryOrderRow?orderNumber=4015
    我实际请求的urlhttp://localhost:8080/portal/order/queryOrderRow?orderNumber=4015
    本地项目通过http://localhost:8081/#/在浏览器中进行访问。

    通过伪造请求使得http请求为同源的,然后将同源的请求发送到反向代理服务器上,由反向代理服务器去请求真正的url,这样就绕过直接请求真正的url导致跨域问题。

    展开全文
  • Vue3.x项目中官方已经删除了vue.config.js配置文件,但是我们仍然需要配置跨域、打包、静态资源目录等问题,这时候仍然需要在vue项目中创建vue.config.js配置文件。 需要注意的是创建vue.config.js时,我们无需再次...

    Vue3.x项目中官方已经删除了vue.config.js配置文件,但是我们仍然需要配置跨域、打包、静态资源目录等问题,这时候仍然需要在vue项目中创建vue.config.js配置文件。
    需要注意的是创建vue.config.js时,我们无需再次导入该文件,该文件创建在与“src”同级目录下

    文件配置详解:
    出口: 整个文件需要以module.exports = { … }作为出口配置项;
    baseUrl: 配置项目根路径,也就是项目默认访问显示的路径;
    outputDir: 打包Vue项目之后生成的文件夹,改为dist2 那么打包生成的文件就是dist2;
    assetsDir: 静态资源目录,存放静态文件js、css、img、fonts等等;
    lintOnSave: 是否开启eslint 保存检测语法,有效值true、false、error;
    在这里插入图片描述
    devserve:{ — } 配置服务;
    open: 项目启动完毕之后是否自动打开浏览器页面;
    host: 配置对应主机名;
    port:8080, 项目端口号;
    https:false, https协议,默认false;
    hotOnly:false, 热模块更新 默认fasle ;
    proxy:{ — } 配置跨域;
    target:“http://localhost:5000/api/”, 代理地址
    ws:true, 是否跨域
    changOrigin:true,
    pathRewrite:{
    “^/api”:""
    }
    在这里插入图片描述

    展开全文
  • 详解Vue-cli代理解决跨域问题

    千次阅读 2018-05-21 10:59:25
    使用vue-cli调接口的时候,总是会出现垮与问题,因为vue的localhost与访问域名不一致导致。而这一点,开发者显然也想到了,故而在vuejs-templates,也就是vue-cli的使用的模板插件里,有关于API proxy的说明,这个...
  • 研究了下config文件,心得体会如下,给还不太清楚如何在config文件中设置跨域的同学参考参考,不对的地方,欢迎指正。 module.exports = { publicPath: '/', // 项目部署的基础路径 我们默认假设你的应用将会部署在...
  • vue+nginx设置跨域

    千次阅读 2019-08-26 10:38:28
    vue-cli搭建的项目为例, 在webpack配置文件 /config/index.js, 由于我们是在开发环境下使用,自然而然是要配置在dev里面,找到 proxyTable属性,配置如下: dev: { // Paths assetsSubDirectory: 'static', ...
  • 什么是跨域 ...Vue.js中解决跨域问题 根目录添加配置文件vue.config.js target 目标地址 changeOrigin 变更请求头中设置的host pathRewrite URL重写规则 vue.config.js为: module.exports = { d
  • 依然是设置项目根目录的 vue.config.js 对其配置中的 devServer.proxy 进行设置: module.exports = { devServer: { open: true, port: 8888, proxy: { '/api': { // API服务器的地址 target: '...
  • 发送ajax请求时,浏览器要求当前网页和服务器必须是同源的,同源是指协议/一级域名/二级域名/端口号 必须一致,有一个不同就是跨域. 如http://192.168.0.107:3001和http://192.168.0.107:3000,由于3000端口和3001端口...
  • tp5跨域请求 VUE+tp5跨域session问题

    千次阅读 2019-03-28 20:16:44
    闲来无事,公司又处于下滑期,于是就自学了vue.js,但是作为初学者,遇到很多问题,这里要感谢我的Big Brother @Dires.t帮助我许多,因此解决问题,好了言归正传! cookie 首先必须明确一点,存储cookie是...
  • 一、异步请求: 1.命令行 : cd my-project npm install --save axios 2.main.js: // 引入axios异步请求 import Axios from 'axios' Vue.prototype.$axios=Axios; 3.xx.vue: mounted() { this.getUserList...
  • 跨域浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议,端口,域名。只要这个3个中有一个不同就是跨域。 二、常见的跨域类型 1.协议跨域 http://test.a.cn -> https://test.a.
  • 我们目前暂时是在本地电脑上不同localhost端口直接实现跨域请求数据。这么简简单单的问题。我花了好多时间去查资料。结果没想到很简单就实现了。 前端部分: 使用axios获取后端数据: 1.安装axios: npm ...
  • 文章目录SpringBoot + Vue前后端分离开发跨域问题一个因跨域问题报错的例子跨域问题浏览器的同源策略如何解决跨域问题后端来解决前端来解决 一个因跨域问题报错的例子   我们以一个简单的springboot + vue前后...
  • 跨域资源共享CORS(Cross-origin Resouce Sharing),是W3C的一个标准,允许浏览器向跨源的服务器发起XMLHttpRequest请求,克服ajax请求只能同源使用的限制。关于CORS的详细解读,可参考阮一峰大神的博客:跨域资源...
  • 跨域资源共享CORS(Cross-origin Resource Sharing),是W3C的一个标准,允许浏览器向跨源的服务器发起XMLHttpRequest请求,克服ajax请求只能同源使用的限制。关于CORS的详细解读,可参考阮一峰大神的博客:跨域资源...
  • 跨域问题一直是前端的一大难题,从前端出道到至今,无论是自己还是身边的同事,以及网上前端朋友都被这个问题困扰着。 尤其最近写了一个网络封装,用户提出最多的便是跨域问题,解释了很多次,都写在这里吧,以后...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,638
精华内容 655
关键字:

详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)

vue 订阅