angularjs做跨域遇到的一些问题

详解AngularJS如何实现跨域请求 跨域,前端开发中经常遇到的问题,AngularJS实现跨域方式类似于Ajax,使用CORS机制。 下面阐述一下AngularJS中使用$http实现跨域请求数据。 AngularJS XMLHttpRequest:$http用于读取远程服务器的数据 $http.post(url, data, [config]).success(function(){ ... }); $http.get(url, [config]).success(function(){ ... }); $http.get(url, [config]).success(function(){ ... }); 一、$http. 立即下载

最近做angular跨域,发现很多问题,也搜索了很多方法都试过,还好最终都弄出来了,

首先jsonp 这个是可以做跨域的,但是只支持get请求,而且要固定返回callback,所以返回类型只能是String,测试可以,但是不考虑,

Nginx当然肯定是可以的,但是这不属于真正的跨域。

最后我直接在后台写了个filter 搞定。

直接上代码

package com.cdy.filter;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

public class SimpleCORSFilter implements Filter{  
  
    @Override  
    public void destroy() {  
          
    }  
  
    @Override  
    public void doFilter(ServletRequest req, ServletResponse res,  
            FilterChain chain) throws IOException, ServletException {  
          /*  HttpServletResponse response = (HttpServletResponse) res;  
            response.setHeader("Access-Control-Allow-Origin", "*");  // 授权的源控制
            response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");  // 允许请求的HTTP Method
            response.setHeader("Access-Control-Max-Age", "3600");   // 授权的时间
            response.setHeader("Access-Control-Allow-Headers", "Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers"); // 控制哪些header能发送真正的请求   
            response.setHeader("Access-Control-Allow-Credentials", "true");// 控制是否开启与Ajax的Cookie提交方式
            chain.doFilter(req, res);  */
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest)req;
        System.out.println("Origin:"+request.getHeader("Origin"));
        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with, ws_auth_token");
        response.setHeader("Access-Control-Allow-Credentials","true"); //是否支持cookie跨域
        String token = request.getHeader("ws_auth_token");
        if(token==null){
        	token ="admin";
        }
        System.out.println(request.getMethod());
        try{
        	System.out.println(request.getSession().getId());
        	chain.doFilter(req, res);
        }catch(Exception e){
        	Map<String,Object> map = new HashMap<String,Object>();
    		map.put("code", "900");
    		map.put("message", e.getMessage());
    		//map.put("data", Utils.getErrorInfoFromException(e));
    		String msg = JSONArray.fromObject(map).toString();
        	PrintWriter out= response.getWriter();
    		out.write(msg);
    		out.flush();
    		out.close();
    		response.setStatus(900);
        }
          
    }  
  
    @Override  
    public void init(FilterConfig arg0) throws ServletException {  
          
    }  
  
} 

之前试了很多方法都不行,主要是这个过滤器设置有问题,参照这个一般不会有问题,问题解决了,特记录下。ps:这里面也可以制定网址访问
AngularJs解决跨域问题案例详解(简单方法) 本文通过一个案例给大家介绍angularJs解决跨域问题,非常具有参考借鉴价值,感兴趣的朋友一起学习吧 立即下载

相关推荐

用SPSS做信效度分析

对问卷进行Cronbach’s Alpha信度检验。如果此值高于0.8,则说明信度高;如果此值介于0.7-0.8之间,则说明信度较好;如果此值介于0.6~0.7,则说明信度可接受;如果此值小于0.6,说明信度不佳。下面利用SPSS进行分析,点击分析–标度–可靠性分析选项,选中所要分析的问卷数据或题目。得到结果,我们要看这个有用的结果,当克隆巴赫Alpha系数(也可以看标准化后的)大于0.8时候,说明问卷信度较高。

小高~的博客 1万+

angularjs 文件下载 并 从response header中获取文件名

最近在做一个下载文件的功能,后台接口给的是二进制流的方式,那么前端要把二进制流下载下来。 这个过程使用$http的get请求,使用Blob接收,倒是没有难度,主要是遇到了,后台的文件名拿不到 的问题。 在浏览器 中是可以看到的这个请求头,就是js获取不到,如下图: js中,使用response.headers(),只能获取到content-type,而获取不到conte...

diaoman4889的博客 706

Android手机免root玩转Kali NetHunter:Termux保姆级安装指南(附Kex VNC配置)

本文提供了一份详细的Android手机免root安装Kali NetHunter的保姆级指南。通过使用Termux终端模拟器,用户无需解锁Bootloader或获取root权限,即可在普通安卓设备上部署完整的Kali Linux渗透测试环境。教程涵盖了从环境准备、NetHunter核心安装到配置Kex VNC实现图形桌面访问的全过程,并附带了电脑投屏与常见问题解决方案,旨在打造一个便携的移动安全学习与测试平台。

weixin_29208327的博客 304

AngularJS跨域问题

2019独角兽企业重金招聘Python工程师标准>>> ...

weixin_34194087的博客 253

【异常】CNB提示The bill authorization scope cannot access the current request.

摘要:CNB API返回403错误,表明当前token的授权范围无法访问目标仓库。主要原因是:1) REPO_SLUG填写错误,导致资源地址不匹配;2) CNB_TOKEN未授权目标仓库;3) 账号账单状态异常。解决步骤:先检查REPO_SLUG是否与CNB平台仓库地址完全一致;再确认CNB_TOKEN是否绑定目标仓库且有读取权限;最后检查账号账单是否正常且覆盖目标资源。完成排查后更新配置即可解决此授权问题。

奶爸的编程之路,也就一周冷个三天 663

【LaTex】3.5 数据分析

简述了LaTex柱状图、饼图、折线图的画法。

你的指尖有改变世界的力量 5891

angular 跨域的解决方案

一. 如果服务端没有解决跨域问题,那就通过angular的配置来设置,三步骤: 在angular的工程目录,和angular.json 同级的目录下面的新建proxy.config.json 文件,内容如下: { "/api": "http://www.test.com/api", "secure": false, "changeOrigin": true } 说明:当我们访问http://localhost:4200/api的时候,其实就相等于访问http://www.test.com/api

book_longker的专栏 9090

手把手教你学Simulink--电机控制架构与算法实现​场景示例:基于Simulink的电机速度环PID调节仿真

本文带你完成了电机速度环PID参数的科学整定,实现了:✅ 理解了速度环的级联系统特性与关键参数影响工程整定法(理论初值)系统辨识法(参数未知时)✅ PID Tuner自动调参(推荐!自动调参兼具快速性与鲁棒性✅ 学会了前馈补偿抗饱和等工程实用技巧。

MHD0815的博客 653

基于Koa+socket.io 与 Angular+socket.io-client 前后端分离(socket端口共用、跨域处理、命名空间等)搭建聊天室

前言 在之前的一个项目中,后来的新需求是要求有实现一个实时通迅的聊天室,由于之前的技术栈的选型,后端是用Koa2 + TypeScript3 + MongoDB4,前端是用Angular10 + ng-zorro-antd10组成的一个前后端分离项目,所用只能在此基础上进行开发。 说到实时通迅,首先就想到的是用WebSocket来做,但由于原生的WebSocket服务端实现起来较为繁琐,所以刚开始就用第三方封装好的koa-socket来实现可是出现各种问题,后来又用koa-socket-2也是四处碰壁,也是

沐枫 926

Sigrity PowerDCPackage ThermalCharacterization模式提取封装基板热阻参数-Single-Die Package DELPHI compact Thermal

DIE(定义DIE的参数):material设置为silicon(硅),Attach material(贴片的材料,设置为Die Attach),Attach thickness(贴片的材料的厚度,厚度设置为0.001mm,点击ok。Cap为覆盖材料,Material定义材料类型,thickness定义厚度,length和width定义长宽,Adhesive Material为胶的材料,Adhesive Material为胶的厚度,本例不定义,跳过即可。

weixin_54787054的博客 363

电阻基础知识及应用电路仿真(Multisim)

本文围绕硬件工程师必备的电阻知识,从基础知识、实操、应用仿真三方面做系统讲解:基础上明确电阻的核心参数、分类、串并联计算及核心特性;实操中详解贴片/色环电阻的阻值读取、贴片封装换算,重点区分0Ω电阻(贴装跳线,实现功能选通/调试等)与磁珠(高频吸噪)的差异及选型;应用上介绍限流、分压、上拉/下拉、阻抗匹配、过压/过流保护五大典型电路的设计公式、选型原则和实操要点,同时给出电阻通用的选型、测量和布线设计规范,形成完整的电阻应用知识体系。

XU157303764的博客 2782

angularJs 解决跨域访问问题

方法:使用$http.jsonp()方式 注意:  请求值必须加上:callback=JSON_CALLBACK 例: $http.jsonp('http://api.map.baidu.com/geodata/v3/geotable/list?callback=JSON_CALLBACK').success(function(data){             co

qq_18740893的博客 1499

Python对象的基本组成和内存示意图及引用的本质

在Python中,变量也称为:对象的引用(reference)。变量存储的就是对象的地址。变量不需要显式声明类型。根据变量引用的对象,Python解释器自动确定数据类型。一个内存块,拥有特定的值,支持特定类型的相关操作。变量位于:栈内存(压栈出栈等细节,后续再介绍)。⚠️Python是动态类型语言。变量通过地址引用了“对象”。

Calor13的博客 557

AngularJS下jsonp跨域SyntaxError问题

AngularJS下jsonp跨域missing ; before statement的问题今天下午帮忙写一段AngularJS的代码,其中用到了跨域请求json。首选当然是$http.jsonp。使用规则 指定callback和回调函数名 函数名为JSON_CALLBACK时,会调用success回调函数,JSON_CALLBACK必须全为大写 使用jsonp时,返回的数据必须为严格的json格式

sqlxy的博客 505

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

angularjs解决跨域问题

首先我来声明一下“跨域”这个问题都有哪些类型: 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,都被当作是不同的域。 下表给出了相对http://store.company.com/dir/page.html同源检测的结果: 我主

HUOJUNHUAN的博客 2105

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

angularjs 跨域访问问题

最近使用angular js 访问restful 后台时需要考虑CORS跨域访问的问题,angular js 的http访问本身也是ajax,在跨域访问时需要做响应的设置 1. 服务器端设置 当跨域访问时,服务器端需要设置响应的header,   Access-Control-Allow-Origin: * 表示该资源运行所有的外域进行访问,当然,也可以只允许某些域访问。     2. 使

Laura Hong的博客 2269

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

angularjs 解决url跨域问题

当在一个产品中引入另一个页面时,一般会出现url跨域问题。解决方式代码如下: <body ng-app="app"> <div> <iframe ng-src="{{ val | trustAsResourceUrl}}" frameborder="0" width="100%" height="600px"></iframe...

friend_ship的博客 792

AngularJS的$http的跨域问题

了解了angularjs的$http方法的本质跟jquery ajax方法是一样的,就开始担心跨域的问题,以前开发工作紧张,遇到了也把跨域问题放下,毕竟做的传统web开发,后端提供的接口和前端都会发布在一个服务器上,现在做的项目大了,自然遇到一些团队只负责发布API,而我们团队只能去调用,跨域肯定是不可跳过的步骤啦。 没想到这么一了解居然有这么多跨域的方法,也不知道可行不可行!先当时m...

dizhe0386的博客 230

AngularJS跨域和session失效问题

跨域问题: response.setHeader(“Access-Control-Allow-Methods”, “POST, GET, OPTIONS, DELETE”); response.setHeader(“Access-Control-Max-Age”, “3600”); response.setHeader(“Access-Contr

leebin_20的博客 5256

java angularjs 跨域访问_AngularJS使用JSONP跨域问题(后台WebApi)

这两天接到项目,项目框架是同事已经搭到的,大概看了一下,用的是AngularJS框架,表示没用过,临时看了一下文档,还好文档通俗易懂,整体不是很难,大概算是有个了解。附上教程地址:AngularJS教程好了,下面说正事,由于项目需求,整个项目都是调用的Api,那么问题来了,MVC WebApi也是同事搭的,但是并没有考虑到跨域问题,所有Api在一个项目里面单独存在,A项目要用js访问Api的接口,...

weixin_39717121的博客 170

AngularJs最简单解决跨域问题jsonp案例

原文地址:http://www.manks.top/angularjs_ajax_jsonp.html 首先我们做点准备说明,不然你明白我说的是啥意思别人不明白,就算别人明白了那总有人不明白,那你要说了,我的意思是这个说明必须要做了,答案是必须的,为了更好的方便大家理解嘛。 我们以两个主域名或者一个主域名+一个二级域名为例,均可演示跨域问题。 客户端 a.com服务端 b.com

wmy94827的博客 5085

java angularjs 跨域访问_AngularJs最简单解决跨域问题案例

作者:白狼 出处:http://www.manks.top/angularjs_ajax_jsonp.html本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。首先我们做点准备说明,不然你明白我说的是啥意思别人不明白,就算别人明白了那总有人不明白,那你要说了,我的意思是这个说明必须要做了,答案是必须的,为了更好的方便大家理解嘛...

weixin_30118071的博客 182

本地运行angularjs应用,提示出现跨域问题

应用介绍: 使用angularjs创建一个简单的公司员工管理页面 使用Chrome打开后,提示存在跨域问题。 和别人交流后,得知使用像Angular,React,Vue框架,在Chrome地址栏中输入file:///xxxx.html来访问会出现跨域问题,最好的是http,或者https,放在本地服务器上就不会出现这种跨域问题。 另外还一种解决方案是,可以用fi...

Bao82527的博客 264
上一篇: JMS 之 ActiveMQ
下一篇: springmvc 进行上传文件时 报错springmvc 进行上传文件时
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值