Vue解决跨域问题方案

方案1：使用vue自带配置文件解决跨域问题

（1）这个Vue项目有自带config文件的方式

proxyTable: {'/fh': {target: 'http://localhost:8080/',//设置你调用的接口域名和端口号 别忘了加httpchangeOrigin: true,    //這裡true表示实现跨域pathRewrite: {'^/fh': '/'//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可}}}

(2）这个Vue项目没有有自带config文件的方式

  devServer: {proxy: {'/api':{target:'http://localhost:8080/',//设置你调用的接口域名和端口changeOrigin:true,//這裡true表示实现跨域pathRewrite:{'/api':''}}}
}

发起请求：

解决方案2：在Controller类上架@CrossOrigin

package com.fh.controller;import com.h.entity.Drug;
import com.h.service.DrugService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;@RestController
@RequestMapping("/drug")
@CrossOrigin
public class DrugController {@Autowiredprivate DrugService drugService;//查询数据@RequestMapping("queryDrug")public List<Drug>queryDrug(){return drugService.queryDrug();}//新增@RequestMapping("addDrug")public void addDrug(Drug drug){drugService.addDrug(drug);}}

解决方案3：如果还不行查看自己的请求url路径，必须加http://协议

Vue解决跨域问题方案相关推荐

前端跨域的理解和解决跨域的方案详解（全）
作为前端开发,我们遇到最多的应该就是跨域问题,对于萌新来说,跨域就是一道墙,不知所措,其实只要理解了跨域的含义和原理,解决它是不难的,今天给大家介绍下什么是跨域和跨域的解决方案! 什么是跨域? 跨域是 ...
解决跨域常见方案（is therefore not allowed access)
目录什么是跨域: 跨域问题的产生原因: 什么标签可以跨域几种解决跨域的常见方案什么是跨域: 在同一网页中访问多个不同域名下的接口获取数据,即不同域名或不同端口或不同协议的接口.这种现象就是跨 ...
vue 解决跨域调试_vue+Java后端进行调试时解决跨域问题的方式
今天在开发过程中遇到一个问题,拿到了一套vue代码,计划对这套代码的部分样式进行调整,Java后端代码已经写好并且部署到了线上.这时命令行运行vue项目时访问会受限,取不下数据来,遇到了跨域访问失败的 ...
Spring解决跨域问题方案
项目中需要前后端分离部署,所以需要解决跨域的问题. 跨域可以在前端通过 JSONP 来解决,但是 JSONP 只可以发送 GET 请求,无法发送其他类型的请求,在 RESTful 风格的应用中,就显得 ...
vue解决跨域问题-反向代理Proxy
浏览器有同源策略,限制同协议.同域名.同端口,只要有一项不一致,就是跨域.(不同源则跨域) 解决方案: 后端 .CORS .JSONP. 反向代理Proxy 同源下:浏览器向服务器请求数据,服务器响应 ...
vue 解决跨域调试_Electron-vue解决跨域
Electron-vue解决跨域博客说明文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 介绍在前后端分离开发的时候就会遇到跨域的问题 ...
axios如何解决跨域的方案
由于解决跨域需要用到headers属性,所以在axios形参中需要用对象形式包裹,同时api接口也要放在url属性当中, 废话不多说,直接上代码,然后在请求接口 ---- 到浏览器的控制台 - 点击刚 ...
vscode vue解决跨域_Vue + WebPack + Typescript初学者VSCode项目 (按需加载、跨域调试、await/async）...
万事开头难,一个好的Hello World程序可以节省我们好多的学习时间,帮助我们快速入门.Hello World程序之所以是入门必读必会,就是因为其代码量少,简单易懂.但我觉得,还应该做到功能丰富, ...
vscode vue解决跨域_在vs code 中如何创建一个自己的 Vue 模板代码
首先,在vs code 中打开定义模板代码的地方第一步,点击"设置"图标按钮,在弹出的菜单中点击的"用户代码片段"(也就是模板) 第二步,在弹出的框中选择新建 ...
vue解决跨域问题- vue-jsonp
第一步:在vue项目中安装上vue-jsonp npm i vue-jsonp --save 第二步:在vue项目中main.js导入 import { VueJsonp } from 'vue-js ...

Vue解决跨域问题方案

Vue解决跨域问题方案相关推荐

最新文章

热门文章