Question

我在AngularJS中创建了一个使用基本授权的小型Web应用程序。为此，我在app.js中添加了以下行：

app.js

.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.defaults.headers.common['Content-Type'] = 'application/json';
    $httpProvider.defaults.headers.common['Accept'] = 'application/json';
    $httpProvider.defaults.headers.common['Authorization'] = "Basic am9obkBqb2huLmNvbTpibGE=";
}]);

在服务器端，我使用Spring MVC显示文件：

ImageResourceController.java

@Controller
@RequestMapping("/common/image")
public class ImageResourceController {
    @Autowired
    private FileService fileService;

    /***************************************************
    * URL: /api/common/image/{id}
    * Method: GET
    * get(): gets an image according to it's uuid from the db
    * @param id : String id (UUID)
    * @return ByteArray containing image
    ****************************************************/
    @RequestMapping(value = "/{id}", method = RequestMethod.GET, produces = MediaType.IMAGE_JPEG_VALUE)
    @ResponseBody
    public byte[] get(@PathVariable("id") String id) throws IOException {
        FileMeta fileMeta = fileService.loadFile(id);

        return IOUtils.toByteArray(fileMeta.getInputStream());
    }
}

FileService.java

/**
 * File Service Layer takes care about the file operations to the database.
 * <p>
 */
@Service
public class FileService {
    @Autowired
    GridFsOperations gridOperation;

    /***************************************************
     * Loads a file with metadata from GridFS.
     * <p>
     * @param uuid : String uuid
     * @return fileMeta : FileMeta fileMeta
     ****************************************************/
    public FileMeta loadFile(String uuid) {
        FileMeta fileMeta = new FileMeta();

        try {
            GridFSDBFile gridFile = gridOperation.findOne(new Query(Criteria.where("metadata.UUID").is(uuid)));
            fileMeta.setMetaData(gridFile.getMetaData().toMap());
            fileMeta.setInputStream(gridFile.getInputStream());
        } catch (Exception e) {
            fileMeta = null;
            e.printStackTrace();
        }

        return fileMeta;
    }
}

FileMeta.java

/**
* FileMeta is used to transfer a file with metadata.
*
*/
public class FileMeta {
    private Map<String, Object> metaData;
    private InputStream inputStream;

    public Map<String, Object> getMetaData() {
        return metaData;
    }

    public void setMetaData(Map<String, Object> metaData) {
       this.metaData = metaData;
    }

    public InputStream getInputStream() {
        return inputStream;
    }

    public void setInputStream(InputStream inputStream) {
        this.inputStream = inputStream;
    }
}

spring-security.xml（intercept-url pattern =＆＃34; / api / **适用）

<!-- Define security patterns to allow/disallow access -->
<http pattern="/favicon.ico*" security="none" />
<http pattern="/resources/**" security="none" />
<http use-expressions="true" create-session="stateless" auto-config='true' entry-point-ref="restAuthenticationEntryPoint">
    <intercept-url pattern="/api/**" access="hasRole('ROLE_USER')"/>
    <http-basic/>
</http>

授权适用于我使用$ http和$ resource进行的每次调用。但是当我想用img ng-src从我的数据库加载我的图像时（我使用MongoDB文件存储），那么Authorization标头就不会被解析到服务器并且登录失败。

<img ng-src="/api/common/image/5ac8618c-7979-4940-a038-1ea91fbd55b3"/><br/>

有人可以告诉我如何使用img ng-src发送Authorization标头吗？

我正在使用AngularJS 1.2.0。

感谢您的帮助。

Answer 1

正如here所述，如果您使用angular-img-http-src，则可以Bower使用bower install --save angular-img-http-src。

如果您查看the code，则会在2016年4月19日URL.createObjectURL使用URL.revokeObjectURL和still draft。所以look if your browser supports it。

要使用它，请将'angular.img'声明为您的应用模块（angular.module('myapp', [..., 'angular.img'])）的依赖关系，然后在HTML中，您可以使用http-src属性<img>标签

在您的示例中，它将是：<img http-src="/api/common/image/5ac8618c-7979-4940-a038-1ea91fbd55b3"/>

但您也可以使用<img http-src="/api/common/image/{{imageId}}"/>作为动态。

当然，这意味着您已使用$httpProvider.interceptors.push声明了interceptor来添加自定义标头，或者您使用$http.defaults.headers.common.MyHeader = 'some value';

ng-src无法使用基本授权

1 个答案: