跨域問題時的Filter無效

阿新 • • 發佈：2018-06-14

一次 figure read iat print cross pan nco RR

我頁面用Web Uploader進行圖片上傳,後臺使用一個過濾器解決跨域的options問題,然後我給入口類加上了這個過濾器註解配置,但是無效
頁面代碼:

<body>
<div id="uploader-demo">
    <!--用來存放item-->
    <div id="fileList" class="uploader-list"></div>
    <div id="filePicker">選擇圖片</div>
</div>
<script>
    // 初始化Web Uploader
    var uploader = WebUploader.create({

        // 選完文件後，是否自動上傳。
        auto: true,
        withCredentials: true,  // 支持CORS跨域帶cookie

        // 文件接收服務端。
        server: ‘http://127.0.0.1:8080/mychat/upload/image‘,

        // 選擇文件的按鈕。可選。
        // 內部根據當前運行是創建，可能是input元素，也可能是flash.
        pick: ‘#filePicker‘,

        // 只允許選擇圖片文件。
        accept: {
            title: ‘Images‘,
            extensions: ‘gif,jpg,jpeg,bmp,png‘,
            mimeTypes: ‘image/*‘
        }
    });
</script>

入口類代碼:

package com.mychat.controol;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.ServletContext;

import org.nutz.ioc.loader.annotation.IocBean;
import org.nutz.mvc.annotation.AdaptBy;
import org.nutz.mvc.annotation.At;
import org.nutz.mvc.annotation.By;
import org.nutz.mvc.annotation.Filters;
import org.nutz.mvc.annotation.Ok;
import org.nutz.mvc.annotation.POST;
import org.nutz.mvc.annotation.Param;
import org.nutz.mvc.upload.TempFile;
import org.nutz.mvc.upload.UploadAdaptor;

import com.mychat.filter.PassHttpFilter;

@IocBean
@At("/upload")
@Ok("json")
@Filters(@By(type=PassHttpFilter.class))
public class UploadModule {
	
	/**
	 * 發送圖片,上傳圖片接口
	 * @param file
	 * @param context
	 * @return
	 */
	@At
	@POST
	@AdaptBy(type = UploadAdaptor.class, args = { "${app.root}/WEB-INF/tmp" })
	public Object image(@Param("file") TempFile file,ServletContext context){
		System.out.println(file.getName());
		System.out.println(file.getMeta().getFileLocalName());
		InputStream in = null;
		OutputStream out = null;
		File f = file.getFile();
		String relpath = context.getRealPath("upload")+"\\"+file.getMeta().getFileLocalName();
		try {
			 in = new FileInputStream(file.getFile());
			 out = new FileOutputStream(relpath);
			byte[] buf = new byte[1024];
			int len = 0;
			while((len = in.read(buf))!=-1){
				out.write(buf,0,buf.length);
			}
		} catch (FileNotFoundException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}finally{
			try {
				out.close();
				in.close();
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
		
		String url = "/mychat/upload/"+file.getMeta().getFileLocalName();	//eclipse默認的tomcat目錄是在其緩存文件中,你要自己指定到tomcat所在目錄
		
		//構建json數據
		Map<String,Object> data = new HashMap<String,Object>();
		data.put("code", "0");
		data.put("msg", "");
		Map<String,String> sourceUrl = new HashMap<String,String>();
		sourceUrl.put("src", url);
		data.put("data", sourceUrl);
		
		return data;
	}
	
	@At
	public void test(){
		System.out.println("lalala");
	}
	
}

Filter代碼:

package com.mychat.filter;

import javax.servlet.FilterChain;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.nutz.mvc.ActionContext;
import org.nutz.mvc.ActionFilter;
import org.nutz.mvc.View;

public class PassHttpFilter implements ActionFilter  {

	@Override
	public View match(ActionContext actionContext) {
			System.out.println("execute passHttpFilter...");
			HttpServletResponse res = actionContext.getResponse();
			HttpServletRequest request = actionContext.getRequest();
	        res.setContentType("textml;charset=UTF-8");
	        res.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
	        res.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
	        res.setHeader("Access-Control-Max-Age", "0");
	        res.setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token");
	        res.setHeader("Access-Control-Allow-Credentials", "true");
	        res.setHeader("XDomainRequestAllowed","1");
	        return null;
	}
	
}

頁面進行文件上傳後,控制臺打印了這句話:

2017-05-04 16:11:30,016 org.nutz.mvc.impl.ActionInvoker.getActionChain(ActionInvoker.java:87) DEBUG - Path=[/upload/image] available methods[POST] but request [OPTIONS], using the wrong http method?
2017-05-04 16:11:30,017 org.nutz.mvc.impl.UrlMappingImpl.get(UrlMappingImpl.java:110) DEBUG - Search mapping for [OPTIONS] path=/upload/image : NOT Action match

這個意思就是沒走filter,但為何沒走呢? 還有我在主模塊上加上這個過濾器也試過,但是還沒用

11 回復
wendal

1樓•404天前

http://nutzam.com/core/mvc/cross_origin.html

蛋蛋的憂傷(qq_32b899df) 2樓•404天前

嗯.我的主模塊代碼如下:


@Modules(scanPackage=true)
@IocBy(type=ComboIocProvider.class, args={"*js", "ioc/",// 這個package下所有帶@IocBean註解的類,都會登記上
        "*anno", "com.mychat",
        "*tx", // 事務攔截 aop
        "*async"}) // 異步執行aop
@Encoding(input="utf-8",output="utf-8")
@Filters({@By(type=CrossOriginFilter.class)})
@ChainBy(args="mvc/nutzbook-mvc-chain.js")
public class MainModule {
}

但是無效哎...

蛋蛋的憂傷(qq_32b899df) 3樓•404天前

好像根本就沒走過濾器....應該怎麽搞

wendal

4樓•404天前

加在具體方法上

蛋蛋的憂傷(qq_32b899df) 5樓•404天前

我這麽加了

package com.mychat.controol;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.ServletContext;

import org.nutz.ioc.loader.annotation.IocBean;
import org.nutz.mvc.annotation.AdaptBy;
import org.nutz.mvc.annotation.At;
import org.nutz.mvc.annotation.By;
import org.nutz.mvc.annotation.Filters;
import org.nutz.mvc.annotation.Ok;
import org.nutz.mvc.annotation.POST;
import org.nutz.mvc.annotation.Param;
import org.nutz.mvc.filter.CrossOriginFilter;
import org.nutz.mvc.upload.TempFile;
import org.nutz.mvc.upload.UploadAdaptor;

import com.mychat.filter.PassHttpFilter;

@IocBean
@At("/upload")
@Ok("json")
public class UploadModule {
	
	/**
	 * 發送圖片,上傳圖片接口
	 * @param file
	 * @param context
	 * @return
	 */
	@At
	@POST
	@AdaptBy(type = UploadAdaptor.class, args = { "${app.root}/WEB-INF/tmp" })
	@Filters({@By(type=CrossOriginFilter.class),@By(type=PassHttpFilter.class)})
	public Object image(@Param("file") TempFile file,ServletContext context){
		System.out.println(file.getName());
		System.out.println(file.getMeta().getFileLocalName());
		InputStream in = null;
		OutputStream out = null;
		File f = file.getFile();
		String relpath = context.getRealPath("upload")+"\\"+file.getMeta().getFileLocalName();
		try {
			 in = new FileInputStream(file.getFile());
			 out = new FileOutputStream(relpath);
			byte[] buf = new byte[1024];
			int len = 0;
			while((len = in.read(buf))!=-1){
				out.write(buf,0,buf.length);
			}
		} catch (FileNotFoundException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}finally{
			try {
				out.close();
				in.close();
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
		
		String url = "/mychat/upload/"+file.getMeta().getFileLocalName();	//eclipse默認的tomcat目錄是在其緩存文件中,你要自己指定到tomcat所在目錄
		
		//構建json數據
		Map<String,Object> data = new HashMap<String,Object>();
		data.put("code", "0");
		data.put("msg", "");
		Map<String,String> sourceUrl = new HashMap<String,String>();
		sourceUrl.put("src", url);
		data.put("data", sourceUrl);
		
		return data;
	}
	
	
	@At
	public void test(){
		System.out.println("lalala");
	}
	
}

日誌依然是:

2017-05-04 16:20:00,956 org.nutz.mvc.impl.ActionInvoker.getActionChain(ActionInvoker.java:87) DEBUG - Path=[/upload/image] available methods[POST] but request [OPTIONS], using the wrong http method?
2017-05-04 16:20:00,957 org.nutz.mvc.impl.UrlMappingImpl.get(UrlMappingImpl.java:110) DEBUG - Search mapping for [OPTIONS] path=/upload/image : NOT Action match

蛋蛋的憂傷(qq_32b899df) 6樓•404天前

頁面js報錯為:

跨域文件上傳.html:1 XMLHttpRequest cannot load http://127.0.0.1:8080/mychat/upload/image. Response to preflight request doesn‘t pass access control check: No ‘Access-Control-Allow-Origin‘ header is present on the requested resource. Origin ‘http://localhost:63342‘ is therefore not allowed access.

wendal

7樓•404天前

把你的PassHttpFilter刪了

wendal

8樓•404天前

然後把@POST也去掉

蛋蛋的憂傷(qq_32b899df) 9樓•404天前

打印日誌:

2017-05-04 16:26:37,383 org.nutz.mvc.impl.UrlMappingImpl.get(UrlMappingImpl.java:101) DEBUG - Found mapping for [OPTIONS] path=/upload/image : UploadModule.image(UploadModule.java:44)
2017-05-04 16:26:37,385 org.nutz.ioc.impl.NutIoc.get(NutIoc.java:151) DEBUG - Get ‘uploadModule‘<class com.mychat.controol.UploadModule>
2017-05-04 16:26:37,385 org.nutz.ioc.impl.NutIoc.get(NutIoc.java:151) DEBUG - Get ‘$aop_async‘<interface org.nutz.ioc.aop.config.AopConfigration>
2017-05-04 16:26:37,387 org.nutz.ioc.impl.NutIoc.get(NutIoc.java:177) DEBUG - 	 >> Load definition name=$aop_async
2017-05-04 16:26:37,391 org.nutz.ioc.loader.combo.ComboIocLoader.load(ComboIocLoader.java:169) DEBUG - Found IocObject($aop_async) in AsyncAopIocLoader@2118378618
2017-05-04 16:26:37,392 org.nutz.ioc.impl.NutIoc.get(NutIoc.java:209) DEBUG - 	 >> Make...‘$aop_async‘<interface org.nutz.ioc.aop.config.AopConfigration>
2017-05-04 16:26:37,395 org.nutz.ioc.impl.ScopeContext.save(ScopeContext.java:64) DEBUG - Save object ‘$aop_async‘ to [app] 
2017-05-04 16:26:37,407 org.nutz.ioc.aop.SimpleAopMaker.<init>(SimpleAopMaker.java:79) DEBUG - Load AopConfigure for anno=org.nutz.ioc.aop.Aop by type=org.nutz.ioc.aop.config.impl.AnnotationAopConfigration
2017-05-04 16:26:37,408 org.nutz.ioc.impl.NutIoc.get(NutIoc.java:177) DEBUG - 	 >> Load definition name=uploadModule
2017-05-04 16:26:37,408 org.nutz.ioc.loader.combo.ComboIocLoader.load(ComboIocLoader.java:169) DEBUG - Found IocObject(uploadModule) in AnnotationIocLoader(packages=[com.mychat])
2017-05-04 16:26:37,408 org.nutz.ioc.impl.NutIoc.get(NutIoc.java:209) DEBUG - 	 >> Make...‘uploadModule‘<class com.mychat.controol.UploadModule>
2017-05-04 16:26:37,408 org.nutz.ioc.aop.impl.DefaultMirrorFactory.getMirror(DefaultMirrorFactory.java:70) DEBUG - Load class com.mychat.controol.UploadModule without AOP
2017-05-04 16:26:37,409 org.nutz.ioc.impl.ScopeContext.save(ScopeContext.java:64) DEBUG - Save object ‘uploadModule‘ to [app] 
2017-05-04 16:26:37,409 org.nutz.mvc.filter.CrossOriginFilter.match(CrossOriginFilter.java:49) DEBUG - Feedback -- [*] [get, post, put, delete, options] [origin, content-type, accept] [true]
2017-05-04 16:26:37,411 com.mychat.mvc.LogTimeProcessor.process(LogTimeProcessor.java:31) DEBUG - [OPTIONS]URI=/mychat/upload/image 28ms

js報錯:

XMLHttpRequest cannot load http://127.0.0.1:8080/mychat/upload/image. Response to preflight request doesn‘t pass access control check: The value of the ‘Access-Control-Allow-Origin‘ header in the response must not be the wildcard ‘*‘ when the request‘s credentials mode is ‘include‘. Origin ‘http://localhost:63342‘ is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

wendal

10樓•404天前

用127.0.0.1

蛋蛋的憂傷(qq_32b899df) 11樓•404天前

厲害.了解得真全面,直接抓住問題重點,牛逼啊,中國的驕傲啊,我對你的崇拜如滔滔江水連綿不絕,黃河泛濫一發不可收拾矣,如果上天能給我再來一次的機會,我一定要跟你生在一個時代,跟你好好學習,啊哈哈哈哈,祝nutz越來越好,用戶越來越多~

跨域問題時的Filter無效

解決 axios 跨域時，傳送 post 請求變 options 的問題

前端：VUE 後端：django 前後端除錯時post請求，發現請求方式為options,服務端不接受，後查詢發現遇到大名鼎鼎的跨域問題。跨域：協議、ip、埠只要前後端有一個不一樣就會出現跨域問題。瀏覽器會嘗試向後端傳送option請求->想後端詢問是否支援從前端的這個域名發起跨

http跨域時的options請求

1、背景　　在前後端分離的專案中經常會遇到跨域請求的問題，如果沒有進行跨域配置，會瀏覽器請求失敗。我一般採用兩種解決方案：　　1、採用nginx進行轉發，是前後端服務處於同一個域下面，從根本上避免跨域問題。　　2、後端服務做一些配置，允許請求跨域，從而解決瀏覽器跨域問題。但是有時候瀏覽器還會發送O

當跨域時,js ajax 請求出現options請求

上面有文章說過http的options. 查了很久.試了很多版本的jquery,下面這段程式碼在同事的機子上測試是沒有問題的.正常的請求, 一在我機子上面就會出現option,網上說先向伺服器預檢等.為什麼在同事的機子上面是正常的呢..最後查出原因.是我在html頁面還引

CORS 前端請求跨域時遇到的一些坑後臺解決方法

最近寫介面和前端vue互動，這樣就需要定義token來驗證，之前的專案都是前後臺不分離，我們都是服務的使用cookie或session。來存取資料。現在前後端分類，那麼token驗證是必不可少的，之前由於跨域問題，我們開始的解決辦法是每次提交資料都攜帶token

CORS跨域時axios無法獲取伺服器自定義的header資訊

最近用vue.js+axios開發單頁面應用時，需要把自定義資訊（token，uid）放到response header中返回，如下<?php header("token:www.uxuew.cn"); header("uid:100"); ?>然後在客戶端獲取

vuejs2.0使用axios跨域時的一個注意

很多在VUE2.0的朋友都知道，vue大部分資料都是從介面調取的，這時候就會設計到一個跨域的問題了。下面是我在跨域的時候遇到過的幾個情況，都是在服務端這邊引起的，我不知道看到各位有沒有遇到過。一:服務端沒允許客戶端的域名調去介面（我服務端是PHP寫的）然後我們要在服

父、子頁面同域、跨域時互相操作dom元素

注意，同域或跨域下，父頁面要操作子頁面的dom元素，必須要等到子頁面載入完畢，否則獲取不了子頁面的document，因此我們需要監聽子頁面的onload事件，或者監聽父頁面的onload事件也可以

徹底解決Asp.netCore WebApi 3.1 跨域時的預檢查204 options重複請求的問題

Asp.netCore WebApi 3.1 跨域的預檢查options問題 1：我們直接使用core跨域的中介軟體，注入跨域服務， services.AddCors(options => { // CorsPolicy 是自訂的 Policy

跨域問題時的Filter無效

一次 figure read iat print cross pan nco RR 我頁面用Web Uploader進行圖片上傳,後臺使用一個過濾器解決跨域的options問題,然後我給入口類加上了這個過濾器註解配置,但是無效頁面代碼: <bod

解決jquery ajax在跨域訪問post請求的時候，ie9以下無效（包括ie9）的問題

jquery src actor div tick 屬性 dex 啟用 logs 最近在做項目的時候遇到一個問題，就是跨域請求ajax的時候ie9以下的瀏覽器不可以訪問，直接執行error裏面的代碼，但是也不報錯，就上網查了查，發現了一個很好用的方法，在這裏記錄一下，也希望

ASP.Net WebAPI與Ajax進行跨域數據交互時Cookies數據的傳遞

調整 ucc header set 定義 div ren ext domain 前言最近公司項目進行架構調整，由原來的三層架構改進升級到微服務架構（準確的說是服務化，還沒完全做到微的程度，顆粒度沒那麽細），遵循RESTFull規範，使前後端完全分離，實現大前端思想。由於是

兩個java項目,跨域訪問時,瀏覽器不能正確解析數據問題

back false callback require autowire data category 解析 als @Controller@RequestMapping(value = "api")public class ApiItemCatController { @

用webpack-dev-server開發時代理，決解開發時跨域問題

端口 dex lba save progress 重要 less span npm 一、設置代理的原因現在對前端開發的要求越來越高，並且隨著自動化以及模塊化的誕生，前後端開發模式越來越流行。後端只負責接口，前端負責數據展示、邏輯處理。但是前後端開發模式，有一個重要的問題

Filter解決ajax跨域問題

-a json ces all -m ons main charset -h public class CrossDomainFilter implements Filter { @Override public void init(Filter

本地數據訪問時出現跨域問題Cross origin requests are only supported for protocol schemes: ……

sta chrom 問題跨域 OS alt 快捷方式 req mfile 從桌面找到Chrome圖標，右鍵屬性，快捷方式，起始位置（安裝路徑）註：在cmd中訪問Program Files文件的方法　　　　%ProgramFiles%=C:\Program Files　

angular4使用httpclient時解決跨域問題

clas 內容 header host ble 重新官方 cor table 跨域問題的環境：在本地開發時，使用命令行ng s開啟服務，訪問地址為http://localhost:4200 假設調用數據接口的服務地址為http://localhost:8088/ap

關於.Net Core 前後端分離跨域請求時 ajax並發請求導致部分無法通過驗證解決辦法。

figure mvc control head configure onf light 請求並發項目中有這樣一個頁面。頁面加載的時候會同時並發6個ajax請求去後端請求下拉框。這樣會導致每次都有1~2個“瀏覽器預請求”不通過。瀏覽器為什麽會自動發送“預請求”？請看以

filter的配置支援跨域

node.js+express 跨域問題加了請求頭無效解決Access to XMLHttpRequest at 'xxxx'from'xxx'origin 'xxx' has been blocke

先吧以下程式碼複製下來 /* 解決跨域問題 / app.all(’’, function(req, res, next) { res.header(“Access-Control-Allow-Origin”, “*”); res.header(“Access-Control-Al

微信公眾號開發時，前端向後端傳送請求獲取signature和openID時出現跨域錯誤的解決辦法。

微信公眾平臺開發用了前端和後端兩個人，前期開發階段前端就很容易遇到跨域問題，今天在前端向後端傳送請求獲取signature，但是前段老是報錯跨域，接受後端的返回資料失敗怎麼辦呢？其實很簡單，後端最後返回簽名的程式碼本來是這樣的： System.out.println("

跨域問題時的Filter無效

相關推薦