首页 > 其他分享 >Vue跨域请求处理

Vue跨域请求处理

时间:2022-12-09 17:24:01浏览次数:32  
标签:Control Vue 跨域 Access Allow configuration com 请求

Axios部署跨域

针对网络请求的处理

// 指定 axios 请求类型
axios.defaults.headers = {
	"Content-Type": "application/json;charset=utf-8",
	'Access-Control-Allow-Origin': "*",
	'Access-Control-Allow-Credentials': "true",
	'Access-Control-Allow-Methods': "POST, GET, OPTIONS, DELETE, PUT",
	'Access-Control-Allow-Headers': "x-requested-with, Content-Type, origin, authorization, accept, client-security-token",
};

v针对Chrome的处理

49版本之前  --disable-web-security
49版本之后 --disable-web-security --user-data-dir=D:\MyChromeDevUserData 

Nginx设置

//nginx.conf
server {
    listen       81;
    server_name  www.domain1.com;
    location / {
        proxy_pass   http://www.domain2.com:8080;  #反向代理
        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
        index  index.html index.htm;

        # 当用webpack-dev-server等中间件代理接口访问nignx时,此时无浏览器参与,故没有同源限制,下面的跨域配置可不启用
        add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时,可为*
        add_header Access-Control-Allow-Credentials true;
        add_header Access-Control-Allow-Methods GET, POST, OPTIONS;
        add_header Access-Control-Allow-Headers *;
    }
}

后端来支持跨域

//配置Configuration
@Configuration
public class GatewayCorsConfiguation {
 
    @Bean
    public CorsFilter corsFilter(){
        // 初始化cors配置对象
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowCredentials(true); // 允许使用cookie,但是使用cookie是addAllowedOrigin必须是具体的地址,不能是*
//        configuration.addAllowedOrigin("*");
        configuration.addAllowedOrigin("http://manage.leyou.com");
        configuration.addAllowedMethod("*");  //允许的请求方式,get,put,post,delete
        configuration.addAllowedHeader("*");//允许的头信息
 
        //初始化cors的源对象配置
        UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();
        corsConfigurationSource.registerCorsConfiguration("/**",configuration);
 
        //3.返回新的CorsFilter.
        return new CorsFilter(corsConfigurationSource);
    }
}
//注解
@CrossOrigin(origins = "*")

标签:Control,Vue,跨域,Access,Allow,configuration,com,请求
From: https://www.cnblogs.com/kevin2022/p/16572428.html

相关文章

  • vue 大文件分片上传处理
    ​ 最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现。在某些业务中,大文件上传是一个比较重要的......
  • vue 项目中实现按钮防抖
    1.新建.js文件存放防抖方法//防抖exportconstantiShake=(fn,t)=>{letdelay=t||1000lettimerreturnfunction(){letargs=arguments;......
  • vite+ts+vue3+router4+Pinia+ElmPlus+axios+mock项目基本配置
    1.vite+TS+Vue3npmcreateviteProjectname:...yourProjectNameSelectaframework:>>VueSelectavariant:>>Typescrit2.修改vite基本配置配置Vite{#configu......
  • vue3组合式api<script lang="ts" setup>中如何接收父组件props传值,以及子组件emit回调
    子组件children.vue首先要引入<scriptlang="ts"setup>import{defineProps,defineEmits}from"vue";constprops=defineProps<{id:string,option:any}>()c......
  • 跨域
    跨域什么是跨域跨域主要由于不符合浏览器的同源策略所产生的一种现象,同源策略属于浏览器的一种安全策略,其要求是所请求资源的协议、域名、端口号与当前页面完全一致,目的......
  • 【Vue】单元格合并,与动态校验
     效果要求先看需求效果:多个数据授权项,配置的时候,业务名称大多数都是一样的,需要合并单元格处理  在elementUI组件文档中有说明[合并列行]:https://element.eleme......
  • vue-router路由
    安装先查看node_modules中是否存在vue-routervue-router是一个插件包,所以我们还是需要用npm/cnpm来进行安装的,在第一个vue-cli文件下输入以下命令npminstallvue-route......
  • vue fullcalendar日历拖拽插入整理
    <!--交易时间管理--><template><divclass="container"><Row><Colspan="6"><divclass="module-title">假期列表</div><divclass="......
  • vue3 使用vue3-video-play
    1.安装版本"vue3-video-play":"^1.3.1-beta.6",2.在main.ts中进行组件注册import{createApp}from'vue'importAntdfrom'ant-design-vue'importAppfrom'......
  • vue之vue-router路由
    vue-router简介:VueRouter是Vue.js官方的路由管理器。它和Vue.js的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:嵌套的路由/视图表模块化的、基于组件的路......