VUE上传图片跨域

上传组件用的elementui - upload,由于上传需要用户的登陆信息,所以前端请求头添加了一个token ,属于自定义header

跨域时浏览器发送options预检请求,会带上自定义的请求头字段,用来判断该字段是否被服务端支持

（如有错误，欢迎指正~~）

在Vue要使用文件上传，找到一个bootstrap编写好的demo，打算直接用，嵌入vue中。demo主要使用jquery和webuploader，jquery和webuploader引用是使用script引入的。要兼容现在的Vue项目。

实验一：

打算在Vue的组件里使用script引入demo里同样引入的文件，发现文件没有被引用进来。

实验二：

打算将script引入文件的语句写成字符串，然后将字符串赋值给Vue组件内的元素的innerHTML里，发现项目报错，原因是innerHTML不允许写入script的内容，百度上说可以使用jquery来实现，试了一下一样不可以。百度一下Vue如何内容HTML，网上说用v-html里面放HTML，然后发现会报同样的错误。

实验三：

前面嵌入HTML文件的内容都失败了，就打算直接嵌入整个HTML文件。可以使用iframe实现内嵌HTML文件，如"<iframe frameborder=”no” style=”width:100%;height:500px;” src=”uploadhtml” ref=”iframe”></iframe>"，将uploadhtml文件和内嵌它的Vue文件放在同一个额文件夹下，运行，界面<iframe>内显示"GET NO / uploadhtml"，打开浏览器调试器发现，uploadhtml它的读取位置是项目的根目录下，修改src使浏览器可以读到uploadhtml对应的位置。

项目打包发布：

在项目打包发布到服务器的时候发现，使用iframe内嵌的HTML文件报错，由于个人对webpack不熟悉，不知道uploadhtml有没有打包进去。webpack打包HTML文件，在webpackprodconfjs文件中的webpackConfig的pulgins中添加

        发现webpack打包文件的时候，会把uploadhtml拎出来放打包下的static文件夹下的upload文件夹，发布服务器的时候发现uploadhtml照样没有显示出来，进入打包后的uploadhtml中，uploadhtml引用js找不到，js应该没有打包进来或者打包进来路径变了。使用important在HTML中引用js文件，打包后发布到服务器还是一样的问题。想着用requirejs去加载HTML，看能不能把HTML和HTML引用的js文件正确打包，由于可以参考内容过少，无从下手。

        不打包内嵌HTML了，把uploadhtml及引用文件放在一个文件夹下，加到webpack打包出来的dist的static文件夹下，将webpack中打包 调用uploadhtml路径的js调用路径内容改为在dist对应的路径，发布到服务器上文件终于可以使用了。（现在才想到可以配置webpack将uploadhtml及引用文件从打包独立出来）。

后续：

        项目从vue-cli2升级到vue-cli3，之前用的方式不适用了。

        vue-cli3用iframe嵌入HTML，HTML要放在public的static文件夹下，在iframe的src调用中，直接写"static/uploadhtml"就可以了。相较于vue-cli2，内嵌的HTML打包后不用上面的笨办法了。

        在内嵌的HTML页面，要求与后端的通讯要带上token，试着用js-cookie插件获取当前vue里的token，存入sessionStorage，再在内嵌的HTML页面获取sessionStorage，在本地运行是可以的，打包给后端部署后，在内嵌的HTML获取sessionStorage的值是null，不知道为什么。

        后面就在与后端通讯的js里使用jquery-cookie获取token，这个插件是基于jquery的，在引入该文件要先引入jquery

        uploaderjs的请求添加请求头参数

请教大家一个问题，App嵌套H5，h5是我用vue写的，h5页面中有 *** 作必须要求登录

app登录之后，重新加载了h5，就是在h5的url上拼接了用户token。

对于H5页面来说，我怎么能获取到token呢

我把获取url上的参数的方法 写在mounted里了。但是app的刷新加载没有触发我的mounted

mounted() {

    let options =this$routequery;

    if(optionsoauth_token){

        oauth_token=optionsoauth_token

      }

      thisgetPage();

//2021-06-30 更新！！！      补充一个方法，IOS 和 Android 都可以这样调用h5页面中的方法

      window["choiceCouponId"] =function (id) { 

            coupon_id=id;

            thatgetDetail();//预览订单

      }

}

登录成功后，服务端会返回一个 token（该token的是一个能唯一标示用户身份的一个key），之后我们将token存储在本地localstorage之中，这样下次打开页面或者刷新页面的时候能记住用户的登录状态，不用再去登录页面重新登录了。

为了保证安全性，后台所有token有效期(Expires/Max-Age)都是Session，就是当浏览器关闭了就丢失了。重新打开浏览器都需要重新登录验证，后端也会在每周固定一个时间点重新刷新token，让后台用户全部重新登录一次，确保后台用户不会因为电脑遗失或者其它原因被人随意使用账号。

用户登录成功之后，我们会在全局钩子routerbeforeEach中拦截路由，判断是否已获得token，在获得token之后我们就要去获取用户的基本信息了

页面会先从 localstorage中查看是否存有 token，没有，就走一遍上一部分的流程重新登录，如果有token,就会把这个 token 返给后端去拉取user_info，保证用户信息是最新的。 当然如果是做了单点登录得的的话，用户信息存储在本地也是可以的。当你一台电脑登录时，另一台会被提下线，所以总会重新登录获取最新的内容。

前端会有一份路由表，它表示了每一个路由可访问的权限。当用户登录之后，通过 token 获取用户的 role ，动态根据用户的 role 算出其对应有权限的路由，再通过routeraddRoutes动态挂载路由。但这些控制都只是页面级的，说白了前端再怎么做权限控制都不是绝对安全的，后端的权限验证是逃不掉的。

前端控制页面级的权限，不同权限的用户显示不同的侧边栏和限制其所能进入的页面(也做了少许按钮级别的权限控制)，后端则会验证每一个涉及请求的 *** 作，验证其是否有该 *** 作的权限，每一个后台的请求不管是 get 还是 post 都会让前端在请求 header里面携带用户的 token，后端会根据该 token 来验证用户是否有权限执行该 *** 作。若没有权限则抛出一个对应的状态码，前端检测到该状态码，做出相对应的 *** 作。

具体实现：

1创建vue实例的时候将vue-router挂载，但这个时候vue-router挂载一些登录或者不用权限的公用的页面。

2当用户登录后，获取用role，将role和路由表每个页面的需要的权限作比较，生成最终用户可访问的路由表。

3调用routeraddRoutes(storegettersaddRouters)添加用户可访问的路由。

4使用vuex管理路由表，根据vuex中可访问的路由渲染侧边栏组件。

优点 ：

缺点 ：

优点

缺点

优点

缺点

优点

缺点

优点

缺点

如果后端需要做token验证，那么 a、form、iframe、windowopen、locationhref 都无法在header中携带token，这时候可以使用ajax来实现。

优点

缺点

优点

缺点

是攻击者通过跨站请求，以合法的用户身份进行非法 *** 作（如转账或发帖等）。CSRF的原理是利用浏览器的Cookie或服务器的Session，**用户身份

防范CSRF的主要手段是识别请求者的身份，通过在表单中添加令牌（token）。

前后端分离实现过程：

后端写入令牌

为了能够让所有的视图函数受到 CSRF 保护，需要开启 CsrfProtect 模块:

生成token值并利用请求钩子设置cookie，然后前端就能获取到cookie值

在前端请求时带上 csrf_token 值

根据登录和注册的业务逻辑，当前采用的是 ajax 请求

所以在提交登录或者注册请求时，需要在请求头中添加 X-CSRFToken 的键值对

原文链接： >

以上就是关于VUE上传图片跨域全部的内容，包括:VUE上传图片跨域、vue-cli2 组件内嵌HTML文件、App嵌套H5,app登录后重新加载h5，就是在h5的url上拼接用户token,H5如何取token等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！