Introduction to several common cross-origin Processing Methods of vue and several cross-origin Processing Methods of vue

Introduction to several common cross-origin Processing Methods of vue and several cross-origin Processing Methods of vue

Set express proxy requests

Invue-cliIn the development environment configuration (config/dev. env. js ),/apidomainAll requests startingnpm run devStartedexpressServer redirection to Target Interface

Official documents: https://vuejs-templates.github.io/webpack/proxy.html

ProxyTable: {'/apidomain': {target: 'http: // localhost: prot', // or ip or domain name. ChangeOrigin: true, pathRewrite: {'^/apidomain ':''}}},

To access h5 through an IP address in the LAN, addhostParameter

The dev command configuration of package. json is as follows:

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",

Disable chrome security policy for cross-Origin

Create a bat file in windows and paste the following command to open it in this mode.

cd "C:\Program Files (x86)\Google\Chrome\Application" chrome.exe --disable-web-security --user-data-dir=c:/CorsUserData

CORS cross-origin settings for the asp.net core server

Official documents: https://docs.microsoft.com/zh-cn/aspnet/core/security/cors

In actual settings, the header parameter added on the h5 end producesPrecheck (OPTIONS) RequestAfter reading the above Article, modify the common parameters to the query parameters.

1. Add cors Service

Public void ConfigureServices (IServiceCollection services) {// if there are only some interfaces, define one or more named CORS policies, and select the policy by name at runtime, to set cross-origin information using feature tags, see the documentation services. addCors ();}

2. Enable Middleware

// Read the cross-origin domain name CorsOrigins set in the Configuration file. Setting ["*"] For an array will allow all var origins = Configuration. getSection ("CorsOrigins "). getChildren (). select (s => s. value ). toArray (); app. useCors (e => {e. withOrigins (origins ). allowAnyHeader (). allowAnyMethod (). allowCredentials ();});

// Obtain public IConfiguration Configuration {get;} public Startup () {var builder = new ConfigurationBuilder ()//... addJsonFile ($ "deleettings. json "); Configuration = builder. build ();}

JSONP

JSONP only supports GET requests, and CORS supports all types of HTTP requests. JSONP supports older browsers and requests for data from websites that do not support CORS.