前端vue+iview跨域问题

vue+iview跨域问题

我们在前端使用的使用，一般情况下我们会使用axios进行跨域来请求后台的数据，但是当我们用不到axios的时候如何进行跨域，比如说：上传的时候，使用iview组件

<Upload
			        ref="upload"
			        :show-upload-list="false"
			        :default-file-list="defaultList"
			        :on-success="handleSuccess"
			        :format="['jpg','jpeg','png']"
			        :max-size="2048"
			        :on-format-error="handleFormatError"
			        :on-exceeded-size="handleMaxSize"
			        :before-upload="handleBeforeUpload"
			        multiple
			        type="drag"
			        action="//jsonplaceholder.typicode.com/posts/"
			        style="display: inline-block;width:58px;">
			        <div style="width: 58px;height:58px;line-height: 58px;">
			            <Icon type="ios-camera" size="20"></Icon>
			        </div>
			    </Upload>

在这里我们使用action作为上传的路径，这个时候就会出现跨域的问题

解决的办法

在vue项目下的config/index.js里面配置


在index.js 的proxyTable里配置如下东西

 proxyTable: {
                '/api': {
                    target: 'http://10.1.5.11:8080/api',     //跨域地址
                    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
                    },
                }
            },

这里是引用 https://blog.youkuaiyun.com/qq_41756364/article/details/79982932

如果这还没有解决你的疑问

很多人在做vue项目的时候都会封装axios，里面会封装一部分的路径，这个时候这个api要和你封装的那一部分路径的数据一样

这个问题就这样解决了